45 lines
908 B
Vue
45 lines
908 B
Vue
<template>
|
|
<view class="flex items-center rounded-[48rpx] bg-[#F7F7F7]! px-[24rpx] py-[12rpx] ml-[32rpx]">
|
|
<view class="i-carbon-search text-[#999]"></view>
|
|
<input
|
|
v-model="searchValue"
|
|
:placeholder="placeholder"
|
|
confirm-type="search"
|
|
placeholder-style="color:#999"
|
|
class="text-start ml-20rpx"
|
|
@confirm="handleConfirm"
|
|
@input="handleInput"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const props = defineProps({
|
|
placeholder: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
value: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
})
|
|
const emit = defineEmits(['update:value', 'confirm'])
|
|
|
|
const searchValue = computed({
|
|
get() {
|
|
return props.value
|
|
},
|
|
set(value) {
|
|
emit('update:value', value)
|
|
},
|
|
})
|
|
const handleConfirm = (e) => {
|
|
emit('confirm', e.detail.value)
|
|
}
|
|
|
|
const handleInput = (e) => {
|
|
emit('confirm', e.detail.value)
|
|
}
|
|
</script>
|