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

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

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

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

效果图如下:

format,png

format,png

format,png

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

### 如何在 Vue 中实现一个搜索框组件 #### 1. 创建独立的 `Search.vue` 组件 为了构建一个可重用的搜索框组件,通常会将其封装成一个独立的 `.vue` 文件。以下是创建 `Search.vue` 的基本结构: ```html <template> <div class="search-area"> <!-- 输入框 --> <input type="text" v-model="searchQuery" @keyup.enter="handleSearch" placeholder="请输入关键词..." /> <!-- 搜索图标按钮 --> <button @click="handleSearch">搜索</button> </div> </template> <script> export default { data() { return { searchQuery: '' // 存储输入框中的值 }; }, methods: { handleSearch() { this.$emit('on-search', this.searchQuery); // 将查询字符串传递给父级组件 } } }; </script> <style scoped> .search-area { display: flex; align-items: center; } input[type="text"] { padding: 8px; margin-right: 10px; border: 1px solid #ccc; border-radius: 4px; } button { padding: 8px 12px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; } </style> ``` 此部分代码展示了如何设计一个简单的搜索框组件[^2]。 --- #### 2. 注册并使用组件 要使其他页面能够使用上述 `Search.vue` 组件,需先对其进行注册。可以通过局部注册或全局注册两种方式完成。 ##### 局部注册示例: 假设我们将 `Search.vue` 放置在同一目录下,则可以在另一个 Vue 页面中这样引入和注册: ```javascript <template> <div> <h1>欢迎来到我的应用</h1> <SearchBar @on-search="performSearch"></SearchBar> </div> </template> <script> // 导入 Search.vue 组件 import SearchBar from './Search.vue'; export default { components: { SearchBar // 注册组件 }, methods: { performSearch(query) { console.log(`正在执行搜索... 查询词为:${query}`); // 处理接收到的查询数据 } } }; </script> ``` 此处说明了如何通过 `@on-search` 自定义事件监听器接收子组件发出的数据[^1]。 --- #### 3. 添加搜索历史记录功能 为了让用户体验更佳,可以扩展该组件的功能,比如保存用户的最近搜索记录。这可通过 Vuex 或本地存储 (localStorage) 来实现。 以下是一个基于 localStorage 的简单实现方案: ```javascript <template> <div class="search-area"> <input type="text" v-model="searchQuery" @keyup.enter="handleSearch" placeholder="请输入关键词..." /> <ul v-if="history.length > 0" class="history-list"> <li v-for="(item, index) in history" :key="index">{{ item }}</li> </ul> </div> </template> <script> export default { data() { return { searchQuery: '', history: JSON.parse(localStorage.getItem('searchHistory')) || [] // 初始化历史记录 }; }, watch: { history(newVal) { localStorage.setItem('searchHistory', JSON.stringify(newVal)); // 动态更新到 localStorage } }, methods: { handleSearch() { const query = this.searchQuery.trim(); if (query && !this.history.includes(query)) { this.history.push(query); } this.$emit('on-search', query); // 同样触发外部逻辑 this.searchQuery = ''; // 清空输入框 } } }; </script> <style scoped> .history-list { list-style-type: disc; padding-left: 20px; font-size: 0.9em; color: gray; } </style> ``` 这部分实现了搜索历史记录的增强型搜索框--- #### 4. 全局挂载搜索框(可选) 如果希望在整个项目范围内都能访问某个固定的搜索栏,可以选择动态渲染的方式。例如利用 DOM 插入技术将 `<Search>` 节点附加至特定位置[^3]。 ```javascript const app = createApp({}); app.component('GlobalSearch', () => import('./components/Search.vue')); document.addEventListener('DOMContentLoaded', () => { const mountPoint = document.createElement('div'); mountPoint.id = 'global-search'; document.body.appendChild(mountPoint); app.mount('#global-search'); }); ``` 以上代码片段演示了一种灵活的方法来管理跨页面共享的 UI 部件。 --- ### 结论 综上所述,在 Vue.js 应用程序中开发一款具备基础功能以及高级特性的搜索框并不复杂。只需遵循模块化原则逐步完善即可满足大多数场景需求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端组件开发

你的钟意将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值