vue（iviewui）输入框历史记录

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

安装npm install good-storage -S

缓存cache.js:

/*把搜索的结果保存下来*/
/*用export把方法暴露出来*/
/*定义存储搜索的key _search_定义内部使用的key*/
let searches_list= []
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,inputName){
    let searches=storage.get(inputName,[])
    /*逻辑是最后一次搜索的结果放到搜索历史的第一个*/
    insertArray(searches,query,(item)=>{
        return item===query //这是传入的一个比较函数 说明query在这个数组中
    },SEARCH_MAX_LENGTH)
    storage.set(inputName,searches)
    return searches
}

export function historySearch(query,inputName){
    if (query != "") {
        //搜索框不为空
        let searches=storage.get(inputName,[])
        /*逻辑是最后一次搜索的结果放到搜索历史的第一个*/
        insertArray(searches,query,(item)=>{
            return item===query //这是传入的一个比较函数 说明query在这个数组中
        },SEARCH_MAX_LENGTH)
        storage.set(inputName,searches)
    }
    //为避免重复先清空再添加
    searches_list = [];
    let searches = storage.get(inputName);
    searches_list = searches ? searches : [];
    return searches_list;
}

vue组件代码,将输入框放入iviewui框架用Poptip标签包裹

<template>
  <div class="container">
    <!-- form -->
    <div style="width: 100%">
      <Form ref="query" :model="query" :label-width="80" inline>
        <div style="float: left">
          <FormItem label="账号搜索">
            <Poptip trigger="focus" placement="bottom-start">
              <Input v-model="query.name" placeholder="用户ID(证件号)/手机号" clearable />
              <template #content>
                <ul>
                  <li v-for="(item,index) in searches_list" :key="index" @click="historySearchFocus(item)">{{item}}</li>
                  <li v-if="!historyQueryName">暂无历史记录</li>
                  <Button v-if="historyQueryName" @click="clearHistory">清空历史</Button>
                </ul>
              </template>
            </Poptip>
          </FormItem>
          <FormItem :label-width="0">
            <Button type="primary" :loading="loading" @click="handleSubmit('query')">
              <span v-if="!loading">搜索</span>
              <span v-else>数据查询中</span>
            </Button>
          </FormItem>
        </div>
      </Form>
    </div>
  </div>
</template>

引入插件

import {historySearch, saveSearch} from "@/store/cache";
import storage from "good-storage"; //引用本地存储js

添加变量
searches_list: [], //历史搜索记录列表
historyQueryName: false,//历史记录是否存在

查询调用方法中增加

//历史缓存
this.searches_list = historySearch(this.query.name,"violations_queryName");//添加历史缓存
this.historyQueryName = this.searches_list.length>0;

不同的输入框改变自定义的key即可当前是"violations_queryName"

添加input框聚焦和清空历史方法

historySearchFocus(item) {
  saveSearch(item,"violations_queryName");//把搜索的记录添加到good-storage中
  this.query.name = item;
},
//清空历史记录
clearHistory() {
  storage.remove("violations_queryName");
  this.searches_list = [];
  this.historyQueryName = false;
},