实现效果如下图所示。
html代码块:
<template>
<div id="Container" style="min-height: 100%; background-color: #fff">
<searchbox/>
<!-- 最近搜索 -->
<div class="history" v-show="show">
<p class="histText">最近搜索</p>
<van-image
class="delIcon"
:src="require('../../assets/del.png')"
@click.native="clearHistoryItems"
/>
</div>
<div class="hislist">
<span
class="hisitem"
v-for="(item, index) in searchHistoryList"
:key="index"
v-show="show"
@click="onSearch(item)"
>{{ item }}</span
>
</div>
</div>
</template>
声明最近搜索的列表:
data() {
return {
// 搜索历史列表,初始化数据
searchHistoryList: ["自己","可以放一些","搜索数据"],
};
},
加载页面后要渲染历史列表:
mounted() {
if (localStorage.historyItems) {
this.searchHistoryList = JSON.parse(localStorage.getItem("historyItems"));
}
},
method方法实现:
首先是搜索框的一个搜索操作,每进行一次搜索操作都要进行一次最近搜索的写入。
建议再搜索框的数据模型设为:
<input v-model.trim="msg"> 过滤前后空格
//search监听事件
onSearch(val) {
//判断搜索值,空则提示不进行操作
if (val !== null && val !== "") {
this.appendKeywords(val);
/**自己的搜索功能实现 */
} else {
Toast.fail("不可空搜索");
}
},
添加最近搜索关键字:
1)已有的关键词,删除原有的关键词,再进行新增操作。
2)新增的关键词,若超出10个则删除最后一个。
3)添加到缓存localstorage中。
appendKeywords(value) {
/**
* 1.已经有的关键词将历史的删除
* 2.添加到数组的首位,若超出10个则删除最后一个
* 3.添加到缓存
*/
if (
// 过滤一个结果的空记录添加,如果历史搜索为空则直接添加
this.searchHistoryList !== null &&
this.searchHistoryList !== undefined &&
this.searchHistoryList.length > 0
) {
//检查是否有重复值,有则删除
this.searchHistoryList.forEach((element, index) => {
if (element === value) {
this.searchHistoryList.splice(index, 1);
}
});
// 添加
// 长度判断
if (this.searchHistoryList.length >= 10) {
this.searchHistoryList.unshift(value);
this.searchHistoryList.pop();
} else {
this.searchHistoryList.unshift(value);
}
localStorage.setItem(
"historyItems",
JSON.stringify(this.searchHistoryList)
);
} else {
this.searchHistoryList = [];
this.searchHistoryList.push(value);
localStorage.setItem(
"historyItems",
JSON.stringify(this.searchHistoryList)
);
}
},
清除历史记录按钮功能实现:
// 清空历史记录
clearHistoryItems() {
localStorage.removeItem("historyItems");
this.searchHistoryList = [];
},