开开发消息页

src/components/search-input/search-input.vue

@@ -0,0 +1,64 @@
+<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 search = () => {
+		emits('search', inputValue.value);
+	};
+</script>
+<style scoped lang="scss"></style>