点击搜索时候，将搜索的值存入本地记录并展示，并且有清空历史记录功能。
代码直接贴上：
<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>
)
