使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)


Posted in Vue.js onJune 09, 2021

最近在开发一款新的app项目,我自己也是第一次接触app开发,经过团队的一段时间研究调查,决定使用Vue3+Vant前端组件的模式进行开发,vue2开发我们已经用过几个项目了,所以决定这一次尝试使用Vue3来进行前段开发。
我刚开始负责搜索功能的开发,有历史搜索记录的需求,一开始我认为这是记录的存储信息也会放在一个数据库表里面,但经过一番调查,发现并不是这样,而是要存储在本地。但是网上的方法也并没有完全解决问题,经过一番尝试,终于给搞好了,话不多说,直接上效果图。
初始化不显示历史搜索记录

使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

回车搜索进入详情页面

使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

历史记录页面

使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

清除历史记录

使用Vue3+Vant组件实现App搜索历史记录功能(示例代码)

首先创建一个js文件
这个js文件主要包括了增加历史记录信息,删除所有历史记录信息的功能

export default {

  // 添加搜索首页历史查询记录
  addSearchHistory(state, payload) {
    // list中包含该记录的时,删除
    const index = state.searchHistoryList.indexOf(payload);
    if (index > -1) {
      state.searchHistoryList.splice(index, 1);
    }
    state.searchHistoryList.unshift(payload);
    // 历史记录中最大记20个记录
    const count = state.searchHistoryList.length;
    state.searchHistoryList.splice(20, count);
  },

  // 清除搜索首页历史查询记录
  clearSearchHistory(state) {
    state.searchHistoryList = [];
  },
};

Vue代码块

<template>
  <!-- 搜索框 -->
  <search-bar
    @searchClick="searchClick"
    :placeholderValue="state.placeholderValue"
    :searchVal="state.searchVal">
  </search-bar>
  <div class="search">

    <!-- 搜索历史 -->
    <div class="history" v-if="state.isShowHistory">
      <span class="proHot">搜索历史</span>
      <span class="delHotSearch" @click="delHostClick">清除历史</span>

      <!-- 存放历史记录信息 -->
      <div class="searchBtn-div">
        <span v-for="(item, index) in state.historyList" :key="index" class="searchValBtn" >
        <van-button
          round
          size="small"
          @click="searchValClick(item)"
          >{{ item }}
        </van-button>
      </span>
      </div>
    </div>
  </div>
</template>

<script>
import {
  onMounted,
  reactive,
  getCurrentInstance,
} from 'vue';
import { Toast, Dialog } from 'vant';
import searchBar from '@/components/SearchBar.vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

export default {

  components: {
    searchBar,
  },

  setup() {
    const router = useRouter();
    const store = useStore();
    const { proxy } = getCurrentInstance();
    const state = reactive({
      isShowHistory: '', // 是否显示历史记录
      searchVal: '', // 搜索关键字
      placeholderValue: '搜索产品/资讯/标准/成分/企业',
      historyList: [], // 历史搜索数据
    });


    // 回车搜索
    const searchClick = (val) => {
      store.commit('addSearchHistory', val);
      // router.push({ path: '/search-detail', query: { searchVal: val } });
    };

    // 清除历史记录
    const delHostClick = async () => {
      Dialog.confirm({
        message: '确定要删除历史搜索吗?',
      }).then(() => {
        store.commit('clearSearchHistory', store);
        state.isShowHistory = false;
        Toast({
          message: '删除成功',
          position: 'bottom',
        });
      });
    };
	
	// 初始化获取历史搜索记录信息
    onMounted(async () => {
      // 获取历史搜索信息
      state.historyList = store.state.searchHistoryList;
      // 判断初始化是否显示历史搜索
      if (state.historyList.length > 0) {
        state.isShowHistory = true;
      } else {
        state.isShowHistory = false;
      }
    });

    return {
      state,
      searchClick,
      delHostClick,
    };
  },
};
</script>

<style lang="less" scoped>
</style>

Vue代码直接粘贴复制的话可能没法直接用,因为这里面有好多业务代码已经删除,留下的主要是历史搜索记录的代码。主要有三个重点:

引入useStore

import { useStore } from 'vuex';

const store = useStore();

初始化检索历史搜索记录

// 初始化获取历史搜索记录信息
	// 每次加载这和页面都会首先调用这个方法,来取最新的信息
    onMounted(async () => {
      // 获取历史搜索信息
      state.historyList = store.state.searchHistoryList;
      // 判断初始化是否显示历史搜索
      if (state.historyList.length > 0) {
        state.isShowHistory = true;
      } else {
        state.isShowHistory = false;
      }
    })

搜索框触发搜索事件将搜索信息存放在Store中

// 子组件发射一个事件,父组件调用
    const searchClick = (val) => {
    	// 将搜索值放入历史记录中	
      store.commit('addSearchHistory', val);
      // 路由跳转可以忽略
      // router.push({ path: '/search-detail', query: { searchVal: val } });
    };

清空历史记录

// 清除历史记录
    const delHostClick = async () => {
      Dialog.confirm({
        message: '确定要删除历史搜索吗?',
      }).then(() => {
      	// 清空历史记录信息
        store.commit('clearSearchHistory', store);
        state.isShowHistory = false;
        Toast({
          message: '删除成功',
          position: 'bottom',
        });
      });
    };

以上就是使用Vue3+Vant组件实现App搜索历史记录功能的详细内容,更多关于vue 搜索历史记录的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
vue 实现图片懒加载功能
Dec 31 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
vue实现按钮切换图片
Jan 20 Vue.js
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
Vue 数据响应式相关总结
Jan 28 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
vue打包时去掉所有的console.log
Apr 10 Vue.js
关于vue-router-link选择样式设置
Apr 30 Vue.js
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 #Vue.js
vue响应式原理与双向数据的深入解析
You might like
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
PHP版本常用的排序算法汇总
2015/12/20 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php车辆违章查询数据示例
2016/10/14 PHP
PHP构造二叉树算法示例
2017/06/21 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
jQuery插件StickUp实现网页导航置顶
2015/04/12 Javascript
遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
2015/08/20 Javascript
Javascript操作dom对象之select全面解析
2017/04/24 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
在vscode中统一vue编码风格的方法
2018/02/22 Javascript
node创建Vue项目步骤详解
2020/03/06 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[00:20]DOTA2荣耀之路7:-ah fu-抢盾
2018/05/31 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python实现的归并排序算法示例
2017/11/21 Python
python 编码规范整理
2018/05/05 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Python简易版停车管理系统
2019/08/12 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
python 实现一个简单的线性回归案例
2020/12/17 Python
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
小学教研工作制度
2014/01/15 职场文书
《雨点》教学反思
2014/02/12 职场文书
公司总经理岗位职责
2014/03/15 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
厨师长岗位职责范本
2014/08/25 职场文书
个人债务授权委托书
2014/10/17 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js