57 lines
1.1 KiB
Vue
57 lines
1.1 KiB
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>
|