Vue项目搜索历史功能（详细）

Vue项目搜索历史功能（详细）

看效果图：

html代码：

<template> <div class="qqq"> <!-- 顶部搜索框 --> <div class="search"> <!-- 返回上一步 --> <div @click="back"> <img src="../assets/img/left.png" /> </div> <div> <input type="text" placeholder="请输入内容" v-model="keywords" @input="changevalue($event)" ref="getValue" /> </div> <div @click="quxiao" v-show="show" style="color:grey;">取消</div> <div @click="search" v-show="!show">搜索</div> </div> <!-- 历史搜索 --> <div class="history" v-show="show"> <p>历史搜索</p> <p> <!-- 删除 --> <img src="../assets/img/delete.png" @click="del" /> </p> </div> <!-- 历史搜索列表 --> <div class="hislist"> <span v-for="(item,index) in hislist" :key="index" v-show="show">{{item}}</span> </div> <!-- 搜索列表数据渲染 --> <div class="course"> <!-- 跳转详情页 --> <router-link tag="div" :to="{path:'/coursedetail',query:{id:item.id}}" v-for="(item,index) in searchList" :key="index" class="courselist" > <p class="coursetitle">{{item.title}}</p> <p class="coursetime"> <img src="../assets/img/time.png" /> <span> {{ item.start_play_date|dateTime}}~{{ item.end_play_date | dateTime }} |共{{item.total_periods}}课时 </span> </p> <p class="coursename" v-for="(teach,indexTeach) in item.teachers_list" :key="indexTeach"> <img :src="teach.teacher_avatar" /> <span>{{teach.teacher_name}}</span> </p> <p class="courseprice"> <span>{{item.sales_num}}人已报名</span> <span>{{item.price|price}}</span> </p> </router-link> </div> </div> </template>

js代码：

防抖功能使用到 lodash 工具库 地址链接 ： Lodash是一个一致性、模块化、高性能的 JavaScript 实用工具库。 下载： npm install lodash 使用： import _ from ‘lodash’

<script> // 引入api封装好的接口 import { lessonList } from "../http/api"; // 引入lodash js库 import _ from "lodash"; // vant轻提示 import { Toast } from "vant"; export default { name: "search", data() { return { // 关键字 keywords: "", // 数据列表 searchList: [], // 显示隐藏 show: true, // 搜索历史列表 hislist: [] }; }, created() { // 定义数组接收本地存储的历史记录 let a = localStorage.hislist; if (a) { // 将数组转字符串 this.hislist = JSON.parse(a); } }, methods: { // input监听事件 changevalue(e) { // 获取到输入框的值 this.keywords = e.target.value; // 判断 if (this.keywords.length > 0) { this.show = false; } else { this.show = true; this.searchList = []; } }, // 删除 del() { this.hislist = []; // 本地清除 localStorage.clear(); Toast.success("删除成功"); }, // 取消 quxiao() { this.$router.push({ path: "/course" }); }, // 返回上一步 back() { this.$router.go(-1); }, //搜索 加防抖（使用lodash插件库） search: _.debounce( function() { //判断是否有重复 var index = this.hislist.findIndex(ele => { return ele == this.keywords; }); //如果有的话就删除重复 if (index != -1) { this.hislist.splice(index, 1); } //向数组第一位添加 this.hislist.unshift(this.keywords); //如果数组长度大于4 就删除最后一项 if (this.hislist.length > 4) { this.hislist.splice(5, 1); } // 本地存储历史记录数组 localStorage.hislist = JSON.stringify(this.hislist); // 请求api接口 lessonList({ // 传参数 page: 1, limit: 10, keywords: this.keywords }).then(res => { // console.log(res.data.data.list); // 获取到数据进行赋值 this.searchList = res.data.data.list; // console.log(this.searchList); }); // this.keywords = ""; console.log("防抖"); }, 3000, { leading: true, //指定在延迟开始前调用，默认false。 trailing: false //指定在延迟结束后调用，默认true。 } ) } }; </script>

css代码：

<style lang="scss" scoped> .search { width: 100%; height: 14.33333vw; line-height: 100px; display: flex; justify-content: space-between; border-bottom: 2px solid gainsboro; div:nth-of-type(1) { margin-top: 5px; margin-left: 20px; img { width: 35px; } } div:nth-of-type(2) { input { border: none; border-radius: 40px; background: #e4e7ed; width: 540px; height: 60px; text-indent: 30px; font-size: 25px; } } div:nth-of-type(3) { margin-right: 30px; font-size: 28px; } div:nth-of-type(4) { margin-right: 30px; font-size: 28px; } } .course { border: 1px solid #f0f2f5; margin-top: 0px; } .history { display: flex; justify-content: space-between; margin-top: 30px; p:nth-of-type(1) { font-size: 28px; font-weight: bold; margin-left: 30px; } p:nth-of-type(2) { margin-right: 30px; img { width: 35px; } } } .hislist { span { display: inline-block; background: #f7f7f7; margin-left: 20px; padding: 10px 20px 10px 20px; border-radius: 20px; } } .courselist { width: 83%; margin: 0 auto; margin-top: 30px; background: white; border-radius: 20px; height: 380px; padding: 0px 25px; .coursetitle { font-size: 30px; padding-top: 25px; } .coursetime { margin-top: -25px; img { width: 24px; vertical-align: -3px; } span { font-size: 26px; color: #666666; } } .coursename { margin-top: 50px; img { width: 50px; vertical-align: -15px; } span { font-size: 26px; color: #666666; margin-left: 20px; } } .courseprice { width: 100%; margin: 0 auto; border-top: 1px solid gainsboro; margin-top: 30px; padding-top: 15px; span:nth-of-type(1) { font-size: 25px; color: #666666; } span:nth-of-type(2) { font-size: 30px; color: green; margin-left: 430px; } } } </style>

以上就是历史搜索功能的代码实现，注释也很清楚的！