Vue2+ElementUI存储搜索记录至缓存，搜索框el-input+弹出框el-popover，对历史记录可增删查，聚焦显示历史记录框，回车搜索事件

       修改了需求，记录一下之前的需求代码。

        无搜索记录

        模糊搜索

 代码如下：

HTML

    <el-popover placement="bottom" trigger="focus" ref="popover">
        <template v-if="showOptions && showOptions.length">
            <div v-for="item in showOptions" :key="item.value" class="option-item" @click="search = item.value">
                <div>{{item.value}}</div>
                <i class="el-icon-close" @click.stop="deleteItem(item.value)"/>
            </div>
        </template>
        <template v-else>
            <div class="text-grey text-center font-size12">暂无搜索记录</div>
        </template>
        
        <el-input
            slot="reference"
            ref="headerSearchSelect"
            placeholder="请输入应用名称"
            v-model="search"
            @keyup.enter.native="handleSearch"
            @blur="focus = false"
            @focus="focus = true"
            clearable
            prefix-icon="el-icon-search"
        />
    </el-popover>

 JS

    data(){
        return {
            search:'',
            focus:false,
            options:[],
            timer:null
        }
    },
    computed:{
        showOptions:{
            get(){
                const filterOptions = this.options.filter(item => item.value.toLowerCase().indexOf(this.search.toLowerCase()) === 0)
                return  this.search ? filterOptions : this.options
            },
            set(){}
        },
    },
    mounted(){
        this.options = JSON.parse(window.localStorage.getItem('appSearchOption')) || []
        this.showOptions = [...this.options]
    },
    watch:{
        showOptions:{
            handler(val){
                //筛选结果有数据 显示弹出框
                if(this.focus){
                    if(val.length === 0) this.$refs['popover']?.doClose() 
                    else this.$refs['popover']?.doShow()
                }
            },
            deep:true,
        },
        
    },
    methods:{
        //删除一条搜索记录
        deleteItem(val){
            this.options.splice(this.options.findIndex(item=> item.value === val),1)
            window.localStorage.setItem('appSearchOption',JSON.stringify(this.options))
        },
        //搜索保存记录并搜索
        handleSearch(){
            this.focus = false
            const has = this.options.find(item => item.value === this.search)
            if(this.search !== ''){
                if(!has){
                    this.options.push({value:this.search})
                    window.localStorage.setItem('appSearchOption',JSON.stringify(this.options))
                }
                //防抖
                if(this.timer) clearTimeout(this.timer)
                this.timer = setTimeout(()=>{
                    this.$emit('search',this.search)
                },300)
            }
        }
    }

CSS 

::v-deep .el-input{
    height: 35px;
    .el-input__inner{
        border-radius: 100px;
    }
}

.option-item{
    line-height: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &:hover{
        cursor: pointer;
        background: #f5f7fa;
    }
}