69 lines
1.6 KiB
Vue
69 lines
1.6 KiB
Vue
<template>
|
|
<uv-input
|
|
v-model="inputValue"
|
|
:customStyle="fixedCustomStyles"
|
|
placeholderStyle="color:#999999;font-size:26rpx"
|
|
:placeholder="placeholder"
|
|
:adjustPosition="false"
|
|
:confirmType="confirmType"
|
|
:maxlength="20"
|
|
@confirm="search"
|
|
>
|
|
<template #suffix><uv-icon name="search" color="#2c8ef2" size="24" @click="search(inputValue)"></uv-icon></template>
|
|
</uv-input>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, onMounted, computed, watch } from 'vue';
|
|
const fixedCustomStyles = {
|
|
backgroundColor: '#F1F5FA',
|
|
paddingLeft: '40rpx',
|
|
paddingTop: '5px',
|
|
paddingBottom: '5px',
|
|
border: 'none'
|
|
};
|
|
// 定义props
|
|
const props = defineProps({
|
|
modelValue: {
|
|
type: String, // 输入框通常是字符串类型，这里修改为String更合理
|
|
default: ''
|
|
},
|
|
placeholder: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
confirmType: {
|
|
type: String,
|
|
default: 'search'
|
|
},
|
|
|
|
});
|
|
// 定义emits
|
|
const emits = defineEmits(['update:modelValue', 'search']);
|
|
|
|
// 定义组件内部的inputValue，并与props.modelValue关联
|
|
const inputValue = ref(props.modelValue);
|
|
|
|
// 监听inputValue变化，同步到父组件
|
|
watch(inputValue, (newVal) => {
|
|
emits('update:modelValue', newVal);
|
|
});
|
|
|
|
// 监听父组件传来的modelValue变化，同步到组件内部
|
|
watch(
|
|
() => props.modelValue,
|
|
(newVal) => {
|
|
inputValue.value = newVal;
|
|
}
|
|
);
|
|
const clearText = () => {
|
|
console.log('清除搜索结果');
|
|
inputValue.value = ''
|
|
};
|
|
const search = () => {
|
|
emits('search', inputValue.value);
|
|
};
|
|
defineExpose({clearText})
|
|
</script>
|
|
<style scoped lang="scss"></style>
|