您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)如何使用Vue3+Vant組件實(shí)現(xiàn)App搜索歷史記錄功能的內(nèi)容。小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧。
最近在開發(fā)一款新的app項(xiàng)目,我自己也是第一次接觸app開發(fā),經(jīng)過(guò)團(tuán)隊(duì)的一段時(shí)間研究調(diào)查,決定使用Vue3+Vant前端組件的模式進(jìn)行開發(fā),vue2開發(fā)我們已經(jīng)用過(guò)幾個(gè)項(xiàng)目了,所以決定這一次嘗試使用Vue3來(lái)進(jìn)行前段開發(fā)。
我剛開始負(fù)責(zé)搜索功能的開發(fā),有歷史搜索記錄的需求,一開始我認(rèn)為這是記錄的存儲(chǔ)信息也會(huì)放在一個(gè)數(shù)據(jù)庫(kù)表里面,但經(jīng)過(guò)一番調(diào)查,發(fā)現(xiàn)并不是這樣,而是要存儲(chǔ)在本地。但是網(wǎng)上的方法也并沒(méi)有完全解決問(wèn)題,經(jīng)過(guò)一番嘗試,終于給搞好了,話不多說(shuō),直接上效果圖。
初始化不顯示歷史搜索記錄
回車搜索進(jìn)入詳情頁(yè)面
歷史記錄頁(yè)面
清除歷史記錄
首先創(chuàng)建一個(gè)js文件
這個(gè)js文件主要包括了增加歷史記錄信息,刪除所有歷史記錄信息的功能
export default { // 添加搜索首頁(yè)歷史查詢記錄 addSearchHistory(state, payload) { // list中包含該記錄的時(shí),刪除 const index = state.searchHistoryList.indexOf(payload); if (index > -1) { state.searchHistoryList.splice(index, 1); } state.searchHistoryList.unshift(payload); // 歷史記錄中最大記20個(gè)記錄 const count = state.searchHistoryList.length; state.searchHistoryList.splice(20, count); }, // 清除搜索首頁(yè)歷史查詢記錄 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: '', // 搜索關(guān)鍵字 placeholderValue: '搜索產(chǎn)品/資訊/標(biāo)準(zhǔn)/成分/企業(yè)', historyList: [], // 歷史搜索數(shù)據(jù) }); // 回車搜索 const searchClick = (val) => { store.commit('addSearchHistory', val); // router.push({ path: '/search-detail', query: { searchVal: val } }); }; // 清除歷史記錄 const delHostClick = async () => { Dialog.confirm({ message: '確定要?jiǎng)h除歷史搜索嗎?', }).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代碼直接粘貼復(fù)制的話可能沒(méi)法直接用,因?yàn)檫@里面有好多業(yè)務(wù)代碼已經(jīng)刪除,留下的主要是歷史搜索記錄的代碼。主要有三個(gè)重點(diǎn):
引入useStore
import { useStore } from 'vuex'; const store = useStore();
初始化檢索歷史搜索記錄
// 初始化獲取歷史搜索記錄信息 // 每次加載這和頁(yè)面都會(huì)首先調(diào)用這個(gè)方法,來(lái)取最新的信息 onMounted(async () => { // 獲取歷史搜索信息 state.historyList = store.state.searchHistoryList; // 判斷初始化是否顯示歷史搜索 if (state.historyList.length > 0) { state.isShowHistory = true; } else { state.isShowHistory = false; } })
搜索框觸發(fā)搜索事件將搜索信息存放在Store中
// 子組件發(fā)射一個(gè)事件,父組件調(diào)用 const searchClick = (val) => { // 將搜索值放入歷史記錄中 store.commit('addSearchHistory', val); // 路由跳轉(zhuǎn)可以忽略 // router.push({ path: '/search-detail', query: { searchVal: val } }); };
清空歷史記錄
// 清除歷史記錄 const delHostClick = async () => { Dialog.confirm({ message: '確定要?jiǎng)h除歷史搜索嗎?', }).then(() => { // 清空歷史記錄信息 store.commit('clearSearchHistory', store); state.isShowHistory = false; Toast({ message: '刪除成功', position: 'bottom', }); }); };
感謝各位的閱讀!關(guān)于“如何使用Vue3+Vant組件實(shí)現(xiàn)App搜索歷史記錄功能”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。