shanxia2.0/miniprogram/components/db-ui/db-search.vue

<template>
  <view class="db-search">
    <input
      class="db-search__input"
      type="text"
      :value="modelValue"
      :placeholder="placeholder"
      confirm-type="search"
      @input="onInput"
      @confirm="onConfirm"
    />
    <text v-if="modelValue" class="db-search__clear" @click="onClear">清除</text>
  </view>
</template>

<script setup>
const props = defineProps({
  modelValue: { type: String, default: '' },
  placeholder: { type: String, default: '搜索' }
})
const emit = defineEmits(['update:modelValue', 'search', 'clear', 'change'])

function onInput(e) {
  const v = e.detail.value
  emit('update:modelValue', v)
  emit('change', v)
}
function onConfirm() {
  emit('search', props.modelValue)
}
function onClear() {
  emit('update:modelValue', '')
  emit('change', '')
  emit('clear')
}
</script>

<style scoped>
.db-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f7f8fa;
  border-radius: 8px;
  padding: 8px 12px;
}
.db-search__input {
  flex: 1;
  font-size: 14px;
  color: #323233;
}
.db-search__clear {
  font-size: 12px;
  color: #52b788;
}
</style>