前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >移动端input输入历史建议

移动端input输入历史建议

作者头像
程序员不务正业
发布2019-09-27 19:19:20
8120
发布2019-09-27 19:19:20
举报
文章被收录于专栏:移动端周边技术扩展

基于vant输入历史记录源码

historyInput.gif

使用

代码语言:javascript
复制
<template>
  <div class="hello">
    <historyInput label="备注:" placeholder="请输入备注内容" v-model="msg" historyKey="001010" :maxHistory="10"></historyInput>
    <historyInput label="张荣武:" placeholder="请输入张荣武内容" v-model="name" historyKey="001011" :maxHistory="4"></historyInput>
    <historyInput label="开发人员:" placeholder="请输入开发人员内容" v-model="msg" historyKey="001012" :maxHistory="2"></historyInput>
    <historyInput label="QQ:" placeholder="请输入QQ" v-model="QQ" historyKey="001014" :maxHistory="8"></historyInput>
  </div>
</template>

<script>
import historyInput from "./historyInput"
export default {
  components: {
    historyInput,
  },
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App',
      QQ: "3153256054",
      name: "张荣武"
    }
  }
}
</script>

<style scoped>
</style>

historyInput关键代码

代码语言:javascript
复制
 <div class="historyInput">
    <van-field :label="label" :placeholder="placeholder" autosize v-model="cMessage" @focus="inputFocus()" @blur="inputBlur()" @input="inputChange" />
    <div v-show="bzfirstResponder" class="bz-first-responder">
      <div class="bz-first-item" @click="bzEvent(item)" v-for="(item, index) in bzInputHistory" :key="index">{{item}}</div>
    </div>
  </div>

通过计算属性分离value父子组建之间互相绑定的影响

代码语言:javascript
复制
 computed: {
    cMessage: {
      get() {
        return this.value;
      },
      set(val) {
        this.newValue = val;
      }
    }
  },

数据存储逻辑

代码语言:javascript
复制
var list = JSON.parse(window.localStorage.getItem(this.historyKey));
        if (this.value != null) {
          if (list != null) {
            if (list.indexOf(this.value) == -1) {//不存在

              if (list.length >= this.maxHistory) {
                list.splice(this.maxHistory - 1, list.length - this.maxHistory + 1)
              }
            } else {
              for (var i = 0; i < list.length; i++) {
                if (list[i] == this.value) {
                  list.splice(i, 1);
                  break;
                }
              }
            }
            list.splice(0, 0, this.value)
          } else {
            list = [];
            list.push(this.value)
          }
          window.localStorage.setItem(this.historyKey, JSON.stringify(list))
          this.bzInputHistory = JSON.parse(window.localStorage.getItem(this.historyKey));
        }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019.09.26 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
数据保险箱
数据保险箱(Cloud Data Coffer Service,CDCS)为您提供更高安全系数的企业核心数据存储服务。您可以通过自定义过期天数的方法删除数据,避免误删带来的损害,还可以将数据跨地域存储,防止一些不可抗因素导致的数据丢失。数据保险箱支持通过控制台、API 等多样化方式快速简单接入,实现海量数据的存储管理。您可以使用数据保险箱对文件数据进行上传、下载,最终实现数据的安全存储和提取。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档