Vue 實現輸入框新增搜尋歷史記錄功能
阿新 • • 發佈:2020-11-26
vue實現搜尋顯示歷史搜尋記錄,採用外掛-good-storage
安裝外掛
npm install good-storage -S
在本地新建cache.js檔案,該檔案是關於本地儲存的邏輯處理(快取到本地的資料最大快取15條,並且新的插入在第一位,首先得到當前的儲存資料情況,將關鍵字存到陣列中,判斷如果陣列中有相同的資料,則把重複的資料刪除,將新的關鍵字存入到前面)
cache.js 檔案中的程式碼如下
/*把搜尋的結果儲存下來*/ /*用export把方法暴露出來*/ /*定義儲存搜尋的key _search_定義內部使用的key*/ const SEARCH_KEY='_search_' const SEARCH_MAX_LENGTH=15 /*插入方法 arr儲存的資料 val傳入儲存的值 compare前後比較的函式 maxlen存入的最大值*/ function insertArray(arr,val,compare,maxlen){ //findIndex()函式也是查詢目標元素,找到就返回元素的位置,找不到就返回-1。 const index=arr.findIndex(compare) if(index===0){ //資料為陣列中的第一個資料 不做任何操作 return } if(index>0){ //陣列中有這條資料並且不再第一個位置 arr.splice(index,1) //刪掉這個數 } arr.unshift(val);//把這條資料儲存到陣列中的第一個位置上 if(maxlen && arr.length>maxlen){ //如果有條數限制並且陣列的個數大於限制數 arr.pop() //方法將刪除 arrayObject 的最後一個元素,把陣列長度減 1,並且返回它刪除的元素的值 } } //開源storage的庫,對localstorage和sessionstorage的封裝 import storage from 'good-storage' export function saveSearch(query){ let searches=storage.get(SEARCH_KEY,[]) /*邏輯是最後一次搜尋的結果放到搜尋歷史的第一個*/ insertArray(searches,query,(item)=>{ return item===query //這是傳入的一個比較函式 說明query在這個陣列中 },SEARCH_MAX_LENGTH) storage.set(SEARCH_KEY,searches) return searches }
在對應的元件中應用的方式:
<template> <div class="search"> <!-- 頂部搜尋欄 --> <div class="header"> <div class="head-title title-style">輸入關鍵字</div> <div class="head-input"> <input type="text" ref="inputchange" v-model="valuetext" @keyup.enter="onSearch(true)" @keyup.tab="onSearch(true)" @focus="initPage" placeholder="請輸入關鍵字進行搜尋" /> <div type="text" @click="clear" class="input-btn title-style">清除</div> </div> <div class="history-panel" v-if="!isFocus"> <div v-if="historyxs">搜尋歷史</div> <div v-if="searches_list.length>0"> <ul class="his_ulcon" v-if="historyxs"> <li v-for="(item,index) in searches_list" :key="index" @click="historysearch(item)" >{{item}}</li> </ul> </div> <div class="history-tips" v-else>暫無搜尋記錄!</div> <p v-if="historyxs" @click="clearhis">清空歷史記錄</p> </div> </div> <!-- ... 此處省略無關程式碼 --> <!-- 底部按鈕 --> <div class="footer title-style"> <van-row> <van-col span="12"> <div class="left" @click="resetData">重置所選條件</div> </van-col> <van-col span="12"> <div class="right" @click="onSearch(true)">立即搜尋</div> </van-col> </van-row> </div> </div> </template> <script type="text/Babel"> import { saveSearch } from "../../utils/cache"; //引用本地儲存js import storage from "good-storage"; //引入good-storage包 export default { data() { return { isFocus: true, searches_list: [], //歷史搜尋記錄列表 historyxs: false, valuetext: "" }; }, mounted() {}, methods: { //輸入框獲取焦點 initPage() { this.isFocus = false; this.$emit("initSearchPage"); //為避免重複先清空再新增 this.searches_list = []; let searches = storage.get("_search_"); this.searches_list = searches ? searches : []; if (this.searches_list.length > 0) { this.historyxs = true; } else { this.historyxs = false; } }, //清空歷史記錄 clearhis() { storage.remove("_search_"); this.searches_list = []; this.historyxs = false; }, //點選歷史搜尋把搜尋的記錄新增到good-storage中 historysearch(item) { saveSearch(item); this.valuetext = item; this.historyxs = false; }, resetData() { // ... // 此次省略重置資料的邏輯程式碼 }, onSearch(isFirst) { this.isFocus = true; if (this.valuetext != "") { //搜尋框不為空 saveSearch(this.valuetext); // 本地儲存搜尋的內容 let params = { majorInfo: this.valuetext //流程型別或者流程名稱 }; this.$emit("handleSearch", params); this.isFocus = true; } // ... // 此次省略調用搜索介面的程式碼 }, clear() { this.valuetext = ""; } // ... 無關程式碼已省略 } }; </script> <style lang="less" rel="stylesheet/less" type="text/less" scoped> .search { overflow-y: scroll; overflow-x: hidden; padding: 0.14rem 0.12rem 0.53rem; .header { border-bottom: 0.01rem solid #f2f2f2; .head-title { padding-bottom: 0.05rem; color: #666666; } .head-input { width: 100%; padding-bottom: 0.1rem; display: flex; flex-direction: row; justify-content: space-between; > input { height: 0.29rem; width: 2.84rem; border-radius: 0.03rem; background-color: #f6f6f6; font-family: PingFang-SC-Regular; font-weight: Regular; color: #999999; font-size: 0.12rem; padding-left: 0.12rem; } .input-btn { color: #029ffb; width: 0.5rem; height: 0.29rem; line-height: 0.29rem; text-align: center; } } .history-panel { width: 100%; overflow: hidden; padding: 0.1rem 0; border-top: 1px solid #f2f2f2; .his_ulcon { margin-top: 0.1rem; box-sizing: border-box; display: flex; flex-direction: row; justify-content: flex-start; flex-wrap: wrap; > li { border: 1px solid #f2f2f2; border-radius: 0.03rem; display: inline-block; font-size: 0.12rem; padding: 0 0.15rem; width: fit-content; //div寬度自適應文字內容 width: -webkit-fit-content; width: -moz-fit-content; height: 0.29rem; line-height: 0.29rem; text-align: center; margin-right: 0.1rem; background-color: #f2f2f2; margin-bottom: 0.1rem; } } div { box-sizing: border-box; font-size: 0.13rem; color: #666666; font-weight: Medium; font-family: PingFang-SC-Medium; } > p { text-align: center; margin-top: 0.1rem; font-size: 0.13rem; } } .history-tips { text-align: center; } } .title-style { font-size: 0.13rem; font-weight: Medium; font-family: PingFang-SC-Medium; } } </style>
溫馨提示:引入cache.js時你的檔案路徑要按照你自己的路徑來 一 一對應
總結
以上所述是小編給大家介紹的Vue 實現輸入框新增搜尋歷史記錄功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對碼農教程網站的支援!
如果你覺得本文對你有幫助,歡迎轉載,煩請註明出處,謝謝!