利用vue element-ui 写一段与后端交互的 快捷搜索 最近几条历史搜索记录 代码

<template>
<div>
<el-input
v-model="query"
placeholder="请输入搜索条件"
@keyup.enter.native="search"
suffix-icon="el-icon-search"
></el-input>
<el-collapse-transition>
<el-card v-show="showHistory" class="history">
<el-card-header>
<span>最近搜索记录</span>
<el-button size="mini" type="text" @click="clearHistory">清空</el-button>
</el-card-header>
<el-card-body>
<el-tag
v-for="(item, index) in history"
:key="index"
@click="query = item; search"
closable
size="medium"
style="margin-right: 10px;"
>{{ item }}</el-tag>
</el-card-body>
</el-card>
</el-collapse-transition>
</div>
</template>

<script>
import { debounce } from "lodash";
export default {
data() {
return {
query: "",
history: [],
showHistory: false,
};
},
methods: {
search: debounce(function () {
if (!this.query) return;
// 发送搜索请求
// ...
// 将搜索条件加入最近搜索记录
if (!this.history.includes(this.query)) {
this.history.unshift(this.query);
if (this.history.length > 5) {
this.history.pop();
}
}
}, 500),
clearHistory() {
this.history = [];
},
},
watch: {
query(val) {
if (val) {
this.showHistory = true;
} else {
this.showHistory = false;
}
},
},
};
</script>

<style>
.history {
position: absolute;
top: 45px;
right: 0;
z-index: 1;
}
</style>