vue+element |
您所在的位置：网站首页 › edge浏览器搜索框记录删不掉 › vue+element |
vue+element
|
在input组件上监听focus与blur事件,设置isFoucus标志量，通过v-if控制搜索列表是否显示，在computed中进行计算。 ... computed: { isSearch() { return this.isFocus; } } 2.按下enter键，也可以进行搜索在input组件上监听enter事件（注意在组件上使用原生的方法需要使用native关键字） 3.点击搜索框不输入搜索内容，显示热门搜索和历史搜索。点击搜索框输入搜索内容，直接显示搜索列表显示列表时通过v-if进行控制时候显示,在computed中进行判断是应该显示热门搜索和历史搜索还是直接显示搜索列表 ... ... computed: { isHistorySearch() { return this.isFocus && !this.search; //获取了焦点并且搜索框内容为空显示热门搜索和历史搜索 }, isSearchList() { return this.isFocus && this.search; //获取了焦点并且搜索框内容不为空直接显示搜索列表 }, } 4.将历史搜索内容存储到LocalStorage.
同时我们通过element-ui 的组件，为搜索历史记录提供了好看的样式。而生成的搜索历史样式是随机生成的，可以看见我们之前存入LocalStorage的搜索记录中还存入了对应的tag式样。 types: ["", "success", "info", "warning", "danger"] //搜索历史tag式样生成[min,max）区间随机数 class RandomUtil { } //静态方法，获得随机数 RandomUtil.getRandomNumber = (min, max) => parseInt(Math.random() * (max - min)) + min module.exports = RandomUtil同时在存入LocalStorage之前要判断该搜索记录已经存在了，如果存在，则不存入. 如果没有任何搜索记录，将history字段设为false，只显示热门搜索不显示历史搜索 searchHandler() { //随机生成搜索历史tag式样 let n = RandomUtil.getRandomNumber(0, 5); let exist = this.historySearchList.filter(value => { return value.name == this.search; }).length == 0 ? false : true; //判断搜索是否已经存在了 if (!exist) { this.historySearchList.push({ name: this.search, type: this.types[n] }); Store.saveHistory(this.historySearchList); } //如果没有搜索记录，history字段为false，只显示热门搜索不显示历史搜索 this.history = this.historySearchList.length == 0 ? false : true; }, 5.删除历史记录处理element-ui tag组件的@close事件，删除掉historySearchList中对应的value，重新存入LocalStorage.同时如果历史记录数为0了，将history字段置为false，使得不显示历史记录。 closeHandler(search) { this.historySearchList.splice(this.historySearchList.indexOf(search), 1); Store.saveHistory(this.historySearchList); if (this.historySearchList.length == 0) {//历史记录数为0了，将history字段置为false，使得不显示历史记录。 this.history = false; } }👿但是你会发现这样的话，虽然一条历史记录被删除了，但是每次删除后搜索记录列表就不显示了。 聪明的同学已经想到原因了:点击搜索记录列表内的内容，触发了搜索input输入框的blur事件 解决的方法也很简单：在blur事件中，重置focus焦点时设置timeout，而删除历史记录后，取消掉这个timeout，不重置focus焦点. blur() { var self = this; this.searchBoxTimeout = setTimeout(function() { self.isFocus = false; }, 300); }, closeHandler(search) { this.historySearchList.splice(this.historySearchList.indexOf(search), 1); Store.saveHistory(this.historySearchList); //取消timeout clearTimeout(this.searchBoxTimeout); if (this.historySearchList.length == 0) { this.history = false; } }, 搜索框组件源码搜索框组件源码 |
因为LocalStorage只能以String的形式存在，所以要存的是否要转为String类型，取得是否再转为json，为了方便，可以建立一个通用的store.js【本文地址】
今日新闻 |
推荐新闻 |