qa-prevention-xgf-app/components/keyWordSearchInput/index.vue

<template>
	<u-sticky bgColor="#ffffff">
		<view class="card top-flex-box">
			<u--text v-if="isHasFilter" suffixIcon="arrow-down" text="筛选" @click="selfHandleShowPicker" style="flex: 0.2" />
			<u-search v-model="localInputSearchValue" :showAction="true" actionText="搜索" :animation="false"
				@search="selfHandlerSearch" @custom="selfHandlerSearch" @clear="selfHandlerClear" />
		</view>
		<app-line />
	</u-sticky>
</template>

<script>
export default {
	props: {
		inputSearchValue: {
			type: String,
			required: true,
		},
		/** 是否需要启用前置筛选能力 */
		isHasFilter: {
			type: Boolean,
			required: false
		}
	},
	data() {
		return {
			// 使用本地变量存储父组件传递的值
			localInputSearchValue: this.inputSearchValue,
		};
	},
	watch: {
		// 监听父组件传递的 prop 变化
		inputSearchValue(newVal) {
			this.localInputSearchValue = newVal;
		},
	},
	methods: {
		selfHandlerSearch() {
			this.$emit("search", this.localInputSearchValue);
		},
		selfHandlerClear() {
			this.localInputSearchValue = "";
		},
		/** 组件自身的筛选器处理事件 */
		selfHandleShowPicker() {
			if (!this.isHasFilter) {
				console.log("%c%s", "background: orange; color: black", "请添加 is-has-filter 属性使其生效")
				return;
			}
			this.$emit("showPicker");
		}
	},
};
</script>

<style lang="scss" scoped>
.key-word-search-input-box {
	margin: 20rpx;
}

.top-flex-box {
	display: flex;
}
</style>