美文网首页
移动端input输入历史建议

移动端input输入历史建议

作者: 程序员不务正业 | 来源:发表于2019-09-26 16:09 被阅读0次

基于vant输入历史记录源码

historyInput.gif

使用

<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关键代码

 <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父子组建之间互相绑定的影响

 computed: {
    cMessage: {
      get() {
        return this.value;
      },
      set(val) {
        this.newValue = val;
      }
    }
  },

数据存储逻辑

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));
        }

相关文章

  • 移动端input输入历史建议

    基于vant输入历史记录源码 使用 historyInput关键代码 通过计算属性分离value父子组建之间互相绑...

  • 杂项笔记

    移动端如何阻止下拉出现底白 移动端meta表情解决缓存 input框正则输入限制

  • emoji表情 检验

    主要是为了在移动端输入框(input、textarea)输入emoji表情时,做校验。移动端直接输入emoji表情...

  • 工作随手笔记

    移动端input placeholder垂直不居中。移动端输入框的placeholder文字仔细看并非完全垂直居中...

  • 移动端input 无法获取焦点的问题

    移动端的input都不能输入了,后来发现是 -webkit-user-select :none ; 在移动端开发中...

  • 2018-03-02

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框。 输入框固定在...

  • 点击底部input输入框,弹出的软键盘挡住input(苹果手机使

    测试移动端页面的时候,偶然发现点击底部input输入框时,弹出的虚拟键盘偶尔会挡住input输入框。 输入框固定在...

  • vue ios 输入框点击没反应 兼容问题

    在移动端开发中,input输入框获取到焦点弹出键盘,输入完成后,再次点击会发现input获取不到焦点,因为输入框改...

  • jq与input框事件

    1、input框获取焦点事件 2、input框失去焦点事件 3、input框输入内容变化事件 移动端需要在inpu...

  • 如何禁止移动端input输入时页面放大

    如何禁止移动端input输入时页面放大 设置meta 标签 还要设置input的字体大小不能小于12px

网友评论

      本文标题:移动端input输入历史建议

      本文链接:https://www.haomeiwen.com/subject/jdubyctx.html