最近在用uni-app做一个项目,使用的框架还是vue,想了好久才做出来的vue输入框模糊查询。
HTML代码部分
<input type="text" focus class="search_input" placeholder="请输入搜索站点" v-model="fname" value="1" @focus="search_site"/>
//icon是叉号图标,点击叉号的时候可以清空输入框的内容 <uni-icon type="closeempty" class="search_icon clear" size="26" v-if="fname" @click="clearInput('fname')"></uni-icon>
js代码部分
mounted(){ this.init(); }, methods:{ init(){ //调用后台接口获取数据展示到页面中 }, search(value){ let _self = this; if(!value){ _self.siteDatas=[]; return; }; //调用后台接口获取数据展示到页面中 }, // 点击取消按钮清空输入框 clearInput(val) {
this[val] = ""; this.siteDatas=[]; this.init(); }, // 站点输入框模糊查询 search_site(){ if(document.querySelector('input')==document.activeElement){ //往输入框中传入值,根据值调后台接口进行查询 this.search(this.fname.trim()); } if(this.fname == ''){ //当输入框为空的时候再次调用接口显示全部数据 this.init(); } } } //监听输入框中值的变化 watch: { fname:function(){ this.search_site(); } }