支付宝小程序车牌号输入组件（虚拟键盘）

// components/CarNumber/index.js Component({ /** * 自定义样式 */ externalClasses: ['custom-input-class', 'custom-item-class', 'custom-energy-icon'], /** * 组件的属性列表 */ properties: { defaultNum: { type: String, default: '' } }, /** * 页面展示 */ pageLifetimes: { show() { if (this.data.defaultNum) { // 存在默认车牌号 const length = this.data.defaultNum.length if (length === 8) { // 新能源车牌号 this.setData({ newEnergy: true }) } this.setData({ carNum: this.data.defaultNum.split('') }) } } }, /** * 组件的初始数据 */ data: { carNum: [], currentInput: 0, keyboard: false, keyboardType: 1, newEnergy: false, // 省份输入 provinces: [ ['京', '沪', '粤', '津', '冀', '晋', '蒙', '辽', '吉', '黑'], ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘'], ['桂', '琼', '渝', '川', '贵', '云', '藏'], ['陕', '甘', '青', '宁', '新'], ], // 地区输入 areas: [ ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"], ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"], ["W", "X", "Y", "Z"] ], // 车牌输入 numbers: [ ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K"], ["L", "M", "N", "P", "Q", "R", "S", "T", "U", "V"], ["W", "X", "Y", "Z"] ], // 最后一位输入 last: [ ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"], ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", ], ["N", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"], ["港", "澳", "学", "挂", "警"] ] }, /** * 组件的方法列表 */ methods: { /** * 关闭键盘 */ closeKeyboard() { this.setData({ keyboard: false }) }, /** * 显示省份键盘 */ showProvinceBoard() { this.setData({ keyboard: true, currentInput: 0, keyboardType: 1 }) }, /** * 确定选择省份 */ chooseProvince(event) { const { val } = event.currentTarget.dataset this.setData({ 'carNum[0]': val, currentInput: 1, keyboardType: 2 }) this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 删除选定省份 */ delProvince() { this.setData({ 'carNum[0]': '' }) // 每次都触发 change 事件，通知父组件 this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 显示地区键盘 */ showAreaBoard() { this.setData({ keyboard: true, currentInput: 1, keyboardType: 2 }) }, /** * 选定地区 */ chooseArea(event) { const { val } = event.currentTarget.dataset this.setData({ 'carNum[1]': val, currentInput: 2, keyboardType: 3 }) // 每次都触发 change 事件，通知父组件 this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 删除选定区域 */ delArea() { this.setData({ 'carNum[1]': '', currentInput: 0, keyboardType: 1 }) // 每次都触发 change 事件，通知父组件 this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 显示普通键盘 */ showNumberBoard(event) { const { index } = event.currentTarget.dataset const keyboardType = index === 6 && !this.data.newEnergy ? 4 : 3 this.setData({ keyboard: true, currentInput: index, keyboardType: keyboardType }) }, /** * 选定车牌 */ chooseNumber(event) { const { val } = event.currentTarget.dataset const name = 'carNum[' + this.data.currentInput + ']' this.setData({ [name]: val, currentInput: this.data.currentInput + 1, keyboardType: 3 }) // 跳到最后一位时，键盘不一样 if (this.data.currentInput === 6 && !this.data.newEnergy) { this.setData({ keyboardType: 4 }) } else if (this.data.currentInput === 7 && this.data.newEnergy) { this.setData({ keyboardType: 4 }) } // 每次都触发 change 事件，通知父组件 this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 删除车牌 */ delNumber() { const name = 'carNum[' + this.data.currentInput + ']' this.setData({ [name]: '', currentInput: this.data.currentInput - 1, keyboardType: 3 }) // 如果删除到地区时，切换键盘类型 if (this.data.currentInput === 1) { this.setData({ keyboardType: 2 }) } // 每次都触发 change 事件，通知父组件 this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 显示最后一位键盘 */ showLastBoard() { if (this.data.newEnergy) { // 新能源 this.setData({ keyboard: true, currentInput: 7, keyboardType: 4 }) } else { this.setData({ keyboard: true, currentInput: 6, keyboardType: 4 }) } }, /** * 选定最后一位 */ chooseLast(event) { const { val } = event.currentTarget.dataset if (this.data.newEnergy) { // 新能源 this.setData({ 'carNum[7]': val, currentInput: this.data.currentInput + 1, keyboard: false }) } else { this.setData({ 'carNum[6]': val, currentInput: this.data.currentInput + 1, keyboard: false }) } // 每次都触发 change 事件，通知父组件 this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 删除最后一位 */ delLast() { if (this.data.newEnergy) { this.setData({ 'carNum[7]': '', currentInput: this.data.currentInput - 1, keyboardType: 3 }) } else { this.setData({ 'carNum[6]': '', currentInput: this.data.currentInput - 1, keyboardType: 3 }) } // 每次都触发 change 事件，通知父组件 this.props.onCounterPlusOne(this.data.carNum.join("")); // axml中的事件只能由methods中的方法响应 }, /** * 切换输入新能源车牌号 */ changeCarToNewEnergy() { this.setData({ newEnergy: true }) } } })