小程序组件库开发之车牌号专属键盘

小程序开发过程中可能会碰到和车牌信息相关的开发，这时候就需要输入车牌号，传统的键盘输入车牌号，需要打出汉字，再选择相应的字母数字，并不是特别方便，这里笔者专门开发了车牌号键盘，可以任意选择修改省份，数字和字母。
先看示例图：
小程序组件库开发之车牌号专属键盘

组件主要代码如下：

// components/plate-number-keyboard/plate-number-keyboard.js
Component({

  behaviors: [],

  properties: {
    show: { // 控制键盘显示隐藏
      type: Boolean,
      value: false
    },
    initValue: { // 初始化的值
      type: String,
      value: ""
    }
  },
  data: {
    plateNumber: "", // 键盘操作结果值
    provinceList: {
      line1: ['京', '津', '渝', '沪', '冀', '晋', '辽', '吉', '黑', '苏'],
      line2: ['浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '琼'],
      line3: ['川', '贵', '云', '陕', '甘', '青', '蒙', '贵', '宁', '新'],
      line4: ['藏', '使', '领', '警', '学', '港', '澳']
    },
    letterNumberList: {
      line1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0],
      line2: ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'],
      line3: ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'],
      line4: ['Z', 'X', 'C', 'V', 'B', 'N', 'M']
    },
    showProvince: true, // 是否显示省份面板，控制省份面板和字符面板显示
  }, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
    attached: function() {},
    moved: function() {},
    detached: function() {},
  },

  // 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  attached: function() {}, // 此处attached的声明会被lifetimes字段中的声明覆盖
  ready: function() {
    // 如果初始化有值，赋值，否则，置为空
    this.setData({
      plateNumber: this.data.initValue ? this.data.initValue : ''
    })
  },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function() {},
    hide: function() {},
    resize: function() {},
  },

  methods: {
    /**
     * 键盘面板切换操作，控制省份内容和字符内容显示
     */
    _clickChangePlane: function() {
      this.setData({
        showProvince: !this.data.showProvince
      })
    },
    /**
     * 关闭键盘，将键盘隐藏
     */
    _closeKeyboard: function(e) {
      console.log(2)
      this.setData({
        show: false
      })
    },
    /* 触发外部绑定事件，传递结果值 */
    _handleResult: function() {
      const myEventDetail = {
        value: this.data.plateNumber  // 传递到结果文本
      };
      // 触发外部绑定事件，传递结果参数
      this.triggerEvent('getResult', myEventDetail);
    },
    /**
     * 键盘主要键点击事件，将点击内容更新到plateNumber
     */
    _handleClick: function(e) {
      // 如果当前显示的省份面板，当即任意省份后，自动切换到字符面板，同时将结果值的第一个字符修改
      if (this.data.showProvince) {
        this.setData({
          showProvince: false
        })
      }
      let currentResult = this.data.plateNumber; // 当前的结果值
      let currentText = e.currentTarget.dataset.text; // 当前的操作值

      // 车牌号最多8位，大多数7位，新能源8位，控制不能超过8位数
      if (currentResult.length < 8) {
        this.setData({
          plateNumber: currentResult + currentText
        })

        this._handleResult();
      }
    },
    /**
     * 删除回退点击事件
     */
    _handleDelete: function() {
      let currentText = this.data.plateNumber;
      currentText = currentText.substring(0, currentText.length - 1);
      // 当当前结果值长度大于0时，可执行删减操作
      if (currentText.length >= 0) {
        this.setData({
          plateNumber: currentText
        })

        this._handleResult();
      }
    },
    /**
     * 防止点击穿透
     */
    _preventDefault: function(e) {}
  }

})

具体的说明文档，以及详细代码见下文链接：
小程序组件：车牌号键盘
觉得还可以的给个star，有问题可以留言。

欢迎关注博主——小圣贤君，有问题可以留言哦~

小程序组件库开发之车牌号专属键盘

相关推荐