Vue 实现输入框新增搜索历史记录功能

2020-06-13 06:02:08易采站长站整理

</div>

<div class="history-panel" v-if="!isFocus">
<div v-if="historyxs">搜索历史</div>
<div v-if="searches_list.length>0">
<ul class="his_ulcon" v-if="historyxs">
<li
v-for="(item,index) in searches_list"
:key="index"
@click="historysearch(item)"
>{{item}}</li>
</ul>
</div>
<div class="history-tips" v-else>暂无搜索记录!</div>
<p v-if="historyxs" @click="clearhis">清空历史记录</p>
</div>
</div>
<!-- ... 此处省略无关代码 -->

<!-- 底部按钮 -->
<div class="footer title-style">
<van-row>
<van-col span="12">
<div class="left" @click="resetData">重置所选条件</div>
</van-col>
<van-col span="12">
<div class="right" @click="onSearch(true)">立即搜索</div>
</van-col>
</van-row>
</div>
</div>
</template>

<script type="text/Babel">
import { saveSearch } from "../../utils/cache"; //引用本地存储js
import storage from "good-storage"; //引入good-storage包
export default {
data() {
return {
isFocus: true,
searches_list: [], //历史搜索记录列表
historyxs: false,
valuetext: ""
};
},
mounted() {},
methods: {
//输入框获取焦点
initPage() {
this.isFocus = false;
this.$emit("initSearchPage");
//为避免重复先清空再添加
this.searches_list = [];
let searches = storage.get("_search_");
this.searches_list = searches ? searches : [];
if (this.searches_list.length > 0) {
this.historyxs = true;
} else {
this.historyxs = false;
}
},
//清空历史记录
clearhis() {
storage.remove("_search_");
this.searches_list = [];
this.historyxs = false;
},
//点击历史搜索把搜索的记录添加到good-storage中
historysearch(item) {
saveSearch(item);
this.valuetext = item;
this.historyxs = false;
},
resetData() {
// ...
// 此次省略重置数据的逻辑代码
},
onSearch(isFirst) {
this.isFocus = true;
if (this.valuetext != "") {
//搜索框不为空
saveSearch(this.valuetext); // 本地存储搜索的内容
let params = {
majorInfo: this.valuetext //流程类型或者流程名称
};
this.$emit("handleSearch", params);
this.isFocus = true;
}
// ...
// 此次省略调用搜索接口的代码
},
clear() {
this.valuetext = "";
}
// ... 无关代码已省略