基于Vue+ElementPlus自定义带历史记录的搜索框组件

前言

基于Vue2.5+ElementPlus实现的一个自定义带历史记录的搜索框组件

效果如图：

基本样式：

获取焦点后：

这里的历史记录默认最大存储10条，同时右侧的清空按钮可以清空所有历史记录。

同时搜索记录也支持点击搜索，按下enter也可以直接搜索

vue代码

为什么叫vue2.5是因为我在vue3的框架下同时写vue2和vue3的语言。

这里要提前在main.js中提前注册element-plus中的图标，或者按需引入也可以。

这里我通过将历史记录直接存入到一个列表，然后存储在本地存储，每次有新的搜索记录时，unshift列表头部元素，这样每次在最上方展示的历史记录就是最新的，同时也方便删除旧的历史记录时直接pop掉即可。

实现起来比较简单，可以根据不同需求应用不同场景。

<template>
    <!-- 搜索框 -->
    <div class="search-area" ref="searchbar">

        <el-input v-model="searchcontent" style="max-width: 500px;width: 500px;" :placeholder="placeholder"
            class="input-with-select" maxlength="56" size="large" @focus="isshow = true" @keydown.enter="searchblog">
            <template #append>
                <el-button style="background-color: #fc5531;" size="large" @click="searchblog" :disabled="isclick">
                    <span style="color: white;font-weight: 500;display: flex;">