点击搜索时候,将搜索的值存入本地记录并展示,并且有清空历史记录功能。
代码直接贴上:
<template>
<view>
<!-- 搜索框 -->
<view class="search">
<view style="display: flex;align-items: center;">
<text class="iconfont icon-sousuo position-absolute text-muted"></text>
<input class="searchInput" v-model="inputValue" @confirm="search" placeholder="搜索" type="text" />
</view>
<view>取消</view>
</view>
<!-- 搜索框 -->
<!-- 搜索历史 -->
<view class="searchHistory">
<view style="display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0px 5px;">
<view>搜索历史:</view>
<view style="color: red;font-size: 28px;" @click="empty">×</view>
</view>
<view class="searchHistoryItem">
<view v-for="(item, index) in searchHistoryList" :key="index">
<text>{{ item }}</text>
</view>
</view>
</view>
<!-- 搜索历史 -->
</view>
</template>
<script>
export default {
data() {
return {
inputValue: '',
searchHistoryList: [] //搜索出来的内容
};
},
methods: {
search() {
if (this.inputValue == '') {
uni.showModal({
title: '搜索内容不能为空'
});
} else {
if (!this.searchHistoryList.includes(this.inputValue)) {
this.searchHistoryList.unshift(this.inputValue);
uni.setStorage({
key: 'searchList',
data: JSON.stringify(this.searchHistoryList)
});
} else {
//有搜索记录,删除之前的旧记录,将新搜索值重新push到数组首位
let i = this.searchHistoryList.indexOf(this.inputValue);
this.searchHistoryList.splice(i, 1);
this.searchHistoryList.unshift(this.inputValue);
uni.showToast({
title: '不能重复添加'
});
uni.setStorage({
key: 'searchList',
data: JSON.stringify(this.searchHistoryList)
});
}
}
},
//清空历史记录
empty() {
uni.showToast({
title: '已清空'
});
uni.removeStorage({
key: 'searchList'
});
this.searchHistoryList = [];
}
},
async onLoad() {
let list = await uni.getStorage({
key: 'searchList'
});
// console.log(list,'历史记录----');
if(list[1]&&list[1].data.length>0){
this.searchHistoryList = JSON.parse(list[1].data);
}
}
};
</script>
<style>
.search {
width: 100%;
height: 30px;
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
padding: 0px 15px;
}
.searchInput {
background-color: #f8f9fa;
width: 220px;
margin-left: 5px;
}
.searchHistory {
width: 100%;
margin-top: 5px;
}
.searchHistoryItem {
width: 100%;
display: flex;
flex-wrap: wrap;
}
.searchHistoryItem view {
/* width: 50px; */
height: 20px;
border: 1px solid #eee;
margin: 0px 5px;
}
</style>