首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

前端Vue自定义顶部搜索框:实现热门搜索与历史搜索功能

前端Vue自定义顶部搜索框:实现热门搜索与历史搜索功能

摘要:

随着前端开发复杂性的增加,组件化开发成为了提高效率和降低维护成本的有效手段。本文介绍了一个基于Vue的前端自定义顶部搜索框组件,该组件不仅具备基本的搜索功能,还集成了热门搜索和历史搜索特性,为开发者提供了一个高效、可复用的解决方案。

一、背景与意义

在前端开发中,搜索框是许多应用中不可或缺的一部分。传统上,搜索框的实现往往与整个应用紧密耦合,导致开发和维护的复杂性较高。通过组件化的方式,我们可以将搜索框作为一个独立的组件进行开发,使其更加灵活、可复用。此外,集成热门搜索和历史搜索功能可以为用户提供更加便捷、个性化的搜索体验。

二、Vue组件化开发的优势

Vue作为一款流行的前端框架,其组件化开发的特点使得开发者能够更加高效地进行前端开发。通过Vue的组件化开发,我们可以将搜索框拆分为一个独立的组件,实现单独开发、单独维护,并且可以与其他组件进行灵活的组合,从而提高开发效率和降低维护成本。

三、自定义顶部搜索框的设计与实现

1. 组件结构

自定义顶部搜索框组件主要包括搜索框、热门搜索列表和历史搜索列表三部分。搜索框用于用户输入搜索关键词,热门搜索列表显示用户搜索频率较高的关键词,历史搜索列表则记录用户的搜索历史。

2. 数据处理

组件通过props接收一个名为skipUrl的属性,该属性指定了搜索跳转的目标URL。当用户在搜索框中输入关键词并点击搜索按钮时,组件会构造一个带有搜索关键词的URL,并通过router.push方法跳转到目标页面。同时,组件还会将用户输入的关键词保存到本地存储中,以便实现热门搜索和历史搜索功能。

3. 热门搜索与历史搜索的实现

热门搜索功能通过统计用户搜索关键词的频率来实现。每当用户进行一次搜索时,组件都会更新热门搜索列表。历史搜索功能则通过记录用户搜索历史来实现。用户可以通过点击历史搜索列表中的关键词快速进行搜索。

效果图如下:

四、组件代码实现

组件使用方法

HTML代码实现部分

<view class="content">

<!-- 自定义顶部搜索框 用于搜索跳转 skipUrl:跳转url为绝对路径 /pages开头 -->

<cc-headSearch skipUrl="/pages/index/search"></cc-headSearch>

<!-- 1.推荐流贷产品”“推荐固贷产品”“推荐供应链产品”“推荐综合服务” -->

<div class="mui-content-padded">

<!-- 列表组件 -->

<CCBProjectList :productList="projectList" @click="goProDetail"></CCBProjectList>

</div>

</view>

import CCBProjectList from '../../components/CCProjectList.vue';

export default {

components: {

CCBProjectList

},

data() {

return {

skipUrl: '',

// 列表数组

projectList: []

}

},

mounted() {

this.requestData();

},

methods: {

requestData() {

// 模拟请求参数设置

let reqData = {

'area': '',

"pageSize": 10,

"pageNo": this.curPageNum

}

// 模拟请求接口

this.totalNum = 39;

this.projectList = [];

for (let i = 0; i < 10; i++) {

this.projectList.push({

'proName': '商品名称' + i,

'proUnit': '商品详情' + i,

'area': '商品介绍',

'proType': '优质',

'stage': '七天无理由退货',

'id': i + ''

});

}

}

}

}

page {

background-color: #f7f7f7;

}

.content {

display: flex;

flex-direction: column;

}

.mui-content-padded {

margin: 0px 14px;

/* background-color: #ffffff; */

}

五、总结与展望

本文介绍了一个基于Vue的前端自定义顶部搜索框组件,该组件不仅具备基本的搜索功能,还集成了热门搜索和历史搜索特性。通过组件化的开发方式,我们实现了单独开发、单独维护,并且可以与其他组件进行灵活的组合,大大提高了开发效率和降低了维护成本。未来,我们可以进一步优化该组件的性能和用户体验,例如增加搜索建议、搜索结果高亮等功能。

项目下载地址:

  • 发表于:
  • 原文链接https://page.om.qq.com/page/OTn1u70gCiAG2FyOzjQqR3ww0
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

相关快讯

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券