前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空搜索历史存储记录清除

原创

已于 2024-03-17 07:39:02 修改 · 置顶 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript #前端框架 #ecmascript #html5 #uni-app

于 2023-07-06 09:25:49 首次发布

随着技术的发展，开发的复杂度也越来越高，传统开发方式将一个系统做成了整块应用，经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改，造成牵一发而动全身。通过组件化开发，可以有效实现单独开发，单独维护，而且他们之间可以随意的进行组合。大大提升开发效率低，降低维护成本。

组件化对于任何一个业务场景复杂的前端应用以及经过多次迭代之后的产品来说都是必经之路。组件化要做的不仅仅是表面上看到的模块拆分解耦，其背后还有很多工作来支撑组件化的进行，例如结合业务特性的模块拆分策略、模块间的交互方式和构建系统等等。

今天给大家介绍的一款组件是：前端Vue自定义带历史记录的搜索框组件searchBar 支持搜索输入框清空搜索历史存储记录清除，

效果图如下:

format,png

# cc-hisSearchBar

#### 使用方法

```使用方法

// 不同的业务功能历史记录设置不同存储key

const kStorageKey = "storageKey"

// 执行搜索事件

doSearch() {

if (this.keyword == '') {

uni.showToast({

title: '请输入要搜索的内容',

icon: 'none'

});

return;

}

//

if (this.keyword && this.keyword !== '') {

this.saveKeyword(this.keyword); //保存为历史

}

uni.showLoading({

title: '搜索中...'

});

this.setData({

keywordList: []

});

uni.hideLoading()

uni.showModal({

title: "温馨提示",

content: '搜索的内容 = ' + this.keyword

})

},

//点击历史记录搜索

doHisSearch(item) {

console.log(item)

uni.showModal({

title: '点击的历史搜索条目',

content: '点击的历史搜索条目 = ' + item

})

},

```

#### HTML代码实现部分

```html

<template>

<view class="content">

<view class="search-box">

<view class="input-box">

<input type="text" adjust-position="true" v-model="keyword" :placeholder="defaultKeyword"

placeholder-class="search_text" @confirm="doSearch" data-key="false" confirm-type="search"

@input="onclear"></input>

<image src="/static/close.png" @tap="clears" v-if="shows == true"></image>

</view>

<view class="search-btn" @tap="doSearch" data-key="false" :style="'background:' + colors">搜索</view>

</view>

<view class="search-keyword">

<scroll-view class="keyword-box" scroll-y>

<view class="keyword-block" v-if="oldKeywordList.length>0">

<view class="keyword-list-header">

<view>历史搜索</view>

<view>

<image @tap="oldDelete" src="/static/delete.png">&l