做一个类似于这样的搜索历史。
这种类似的,如果数据不多的话可以储存在用户本地,是非常方便的。
先说下需求:最早搜索的记录(关键词)排在最前,并且大于10个的时候,就删除最后一个。输入重复的话不添加。
ps:这边以apicloud框架与vue.js做栗子。
css 样式按照各位的需求 这边简单些一些栗子
.box{
display: flex;
align-items: center;
justify-content: flex-end;
}
.list{
height:30px;
padding:0 10px;
background: #F8F8F8;
line-height: 30px;
max-width:160px;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
margin: 10px 10px 0 0;
box-sizing: border-box;
border-radius:3px;
}
html
<div class="box">
<div class="list" v-for="(i,index) in list" :key="index"></div>
</div>
js
data:function(){
return {
list:[],//搜索历史列表
keyword:'',//关键词
}
},
methods:{
search(){
var that=this;
var keyArr=that.list;
keyArr.unshift(that.keyword);//往数组最前面添加元素 arr.unshift()向数组的开头添加一个或更多元素
//ES6去重操作 不懂的小伙伴可以去百度下 而且new Set(Arr) 与 [...new Set(Arr)]效果不一样
let newKeyArr=[...new Set(keyArr)];
if(newKeyArr.length>10){//当数组大于10个 就去掉最后一个
newKeyArr.pop();//arr.pop()删除并返回数组的最后一个元素
$api.setStorage('keyword',newKeyArr);//apicloud的储存本地 与localStorage一样
that.list=newKeyArr;//赋值 显示搜索历史关键词列表
}else{
$api.setStorage('keyword',newKeyArr);
that.list=newKeyArr;
}
}
},
mounted(){
var that=this;
//获取本地搜索历史
let keywordlist=$api.getStorage('keyword');//获取本地数据
if(keywordlist!=undefined){//如果有本地储存
that.list=keywordlist;
}
}
最后,如果我的笔记对您有帮助,请给我一个赞~ 谢谢!