Vue - 搜索(search)

1、组件 1.1、html 部分

<div class="search_box"> <div class="input_clear_box"> <input type="text" :placeholder="getData.pla" v-model="searchVal" /> <div class="clear" @click="clear"> <div>×{ getData.searchBtn }} props: { searchValue: { type: String, default: () => { return ''; }, }, getData: { type: Object, default: () => { return {}; }, }, }, data() { return { // 双向绑定 searchVal: '', // 防抖 timer: undefined, }; }, watch: { // 实时监听 searchVal: { handler(val) { if (val.length == 0) { this.searchBtn(1); } else { this.searchBtn(2); } }, // 首次打开就执行一次 // immediate: true, // 深度监听 deep: true, }, // 选项卡切换监听 searchValue: { handler(newVal) { this.searchVal = newVal; }, // immediate: true, deep: true, }, }, methods: { // 清空输入框 clear() { this.searchVal = ''; }, // 点击搜索 searchBtn(i) { let that = this; if (i == 2) { clearTimeout(that.timer); that.timer = setTimeout(() => { that.$emit('searchFun', that.searchVal); }, 600); } else if (i == 3 && that.searchVal.length == 0) { that.$toast(`${that.getData.pla}`); } else { that.$emit('searchFun', that.searchVal); } }, }, }; 

1.3、Css 部分

.search_box { width: 100%; background-color: #ffffff; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 12px 15px; font-size: 14px; color: #a6a6a6; line-height: 30px; } .input_clear_box { flex: 7; background-color: #f1f2f4; border-radius: 15px; display: flex; } input { flex: 6; background-color: #f1f2f4; border-radius: 15px; padding-left: 10px; color: #666666; } input::-webkit-input-placeholder { /* WebKit browsers */ font-size: 14px; color: #ccc; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ font-size: 14px; color: #ccc; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ font-size: 14px; color: #ccc; } input:-ms-input-placeholder { /* Internet Explorer 10+ */ font-size: 14px; color: #ccc; } .clear { flex: 1; display: flex; justify-content: center; align-items: center; } .clear > div { width: 13px; height: 13px; border: 1px solid #999999; border-radius: 50%; font-size: 13px; text-align: center; line-height: 13px; cursor: pointer; } .search_btn { flex: 1; text-align: right; cursor: pointer; } 

2、使用组件 2.1、html 部分

<-- 没有选显卡的时候可以不写 :searchValue="seaVal" 属性 --> <search :getData="searchObj" @searchFun="searchF" :searchValue="seaVal"> components: { Search, }, data() { // 请求参数 query: { search: '' }, // 搜索提示 searchObj: { pla: '请输入申请人', searchBtn: '搜索', }, // 没有选项卡时可以不写 seaVal seaVal: '', }, methods: { // 子组件触发的函数 searchF(data) { this.query.search = data; this.seaVal = data; }, // 选项卡 tab() { this.seaVal = ''; } } }; 

3、演示