【微信小程序-原生】LicenseKeyboard 车牌号键盘输入组件

1. 效果图

2. 组件完整代码

.wxml 文件

<view class="license-keyboard">
    <view wx:if="{{required}}" class="title-required">{{title}}view>
    <view wx:else class="title">{{ title }}view>
    <view class="input-box flex-center" bindtap="handleShowKeyboard">
        <view class="list">
            <block wx:for="{{numArr}}" wx:for-item="item" wx:key="index">
                <view class="list-item {{inputIndex == index && showKeyboard ? 'active' : ''}}" data-index="{{index}}" bindtap="handleInputClick">
                    <view class="energy" wx:if="{{index == 7 && inputIndex != 7}}">新能源view>
                    <view wx:else>{{ item }}view>
                view>
            block>
        view>
    view>
    
    <van-popup show="{{showKeyboard}}" position="bottom" overlay="{{false}}" overlay-class="keyboard-overlay">
        <view class="keyboard-box">
            <view class="key-title">
                <view bindtap="handleFinish">完成view>
            view>
            <view class="key-content">
                <view class="press-wrap">
                    <view class="press-wrap-key {{(listType && index == 30) || (!listType && index == 29) ? 'key2' : ''}} {{!listType && index == 20 ? 'key1' : ''}}" wx:for="{{keyboardList}}" wx:for-item="item" wx:for-index="index" wx:key="id" data-name="{{item.name}}" bindtap="handleKeyboardClick">
                        <view class="press-wrap-key-name">{{ item.name }}view>
                    view>
                view>
                <view class="btn-change btn" bindtap="handleChange">切换view>
                <view class="btn-delete btn" bindtap="handleDelete">删除view>
            view>
        view>
    van-popup>
view>

.js 文件

// components/LicenseKeyboard/LicenseKeyboard.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
    	// 左侧标题
        title: {
            type: String,
            value: '车牌号'
        },
        // 是否显示必填星号
        required: {
            type: Boolean,
            value: false
        },
        // 车牌号回显
        carNo: {
            type: String,
            value: ''
        }
    },
    observers: {
        listType: function (value) {
            this.setKeyboardList()
        },
        inputIndex: function (value) {
            this.setData({
                listType: value == 0 ? true : false
            })
        },
        carNo: function (value) {
            let arr1 = new Array(8).fill('')
            let arr2 = value ? value.split('') : []
            for (const key1 in arr1) {
                if (Object.hasOwnProperty.call(arr1, key1)) {
                    for (const key2 in arr2) {
                        if (key1 == key2) {
                            arr1[key1] = arr2[key2]
                        }
                    }
                }
            }
            this.setData({
                numArr: arr1
            })
            if (arr1[7]) {
                this.setData({
                    inputIndex: 7
                })
            }
        }
    },

    /**
     * 组件的初始数据
     */
    data: {
        first: '',
        numArr: new Array(8).fill(''),
        inputIndex: 0,
        showKeyboard: false, //是否显示键盘
        listType: true,
        isNewEnergy: false,
        keyboardList: [],
        ChineseList: [
            { name: '京', id: 1 },
            { name: '津', id: 2 },
            { name: '冀', id: 3 },
            { name: '晋', id: 4 },
            { name: '蒙', id: 5 },
            { name: '辽', id: 6 },
            { name: '吉', id: 7 },
            { name: '黑', id: 8 },
            { name: '沪', id: 9 },
            { name: '苏', id: 10 },
            { name: '浙', id: 11 },
            { name: '皖', id: 12 },
            { name: '闽', id: 13 },
            { name: '赣', id: 14 },
            { name: '鲁', id: 15 },
            { name: '豫', id: 16 },
            { name: '鄂', id: 17 },
            { name: '湘', id: 18 },
            { name: '粤', id: 19 },
            { name: '桂', id: 20 },
            { name: '琼', id: 21 },
            { name: '渝', id: 22 },
            { name: '川', id: 23 },
            { name: '贵', id: 24 },
            { name: '云', id: 25 },
            { name: '藏', id: 26 },
            { name: '陕', id: 27 },
            { name: '甘', id: 28 },
            { name: '青', id: 29 },
            { name: '宁', id: 30 },
            { name: '新', id: 31 },
            { name: '台', id: 32 },
            { name: '港', id: 33 },
            { name: '澳', id: 34 },
            { name: '使', id: 35 },
            { name: '领', id: 36 },
            { name: '警', id: 37 },
            { name: '学', id: 38 }
        ],
        EnglishNumberList: [
            { name: '1', id: 39 },
            { name: '2', id: 40 },
            { name: '3', id: 41 },
            { name: '4', id: 42 },
            { name: '5', id: 43 },
            { name: '6', id: 44 },
            { name: '7', id: 45 },
            { name: '8', id: 46 },
            { name: '9', id: 47 },
            { name: '0', id: 48 },
            { name: 'Q', id: 49 },
            { name: 'W', id: 50 },
            { name: 'E', id: 51 },
            { name: 'R', id: 52 },
            { name: 'T', id: 53 },
            { name: 'Y', id: 54 },
            { name: 'U', id: 55 },
            { name: 'I', id: 56 },
            { name: 'O', id: 57 },
            { name: 'P', id: 58 },
            { name: 'A', id: 59 },
            { name: 'S', id: 60 },
            { name: 'D', id: 61 },
            { name: 'F', id: 62 },
            { name: 'G', id: 63 },
            { name: 'H', id: 64 },
            { name: 'J', id: 65 },
            { name: 'K', id: 66 },
            { name: 'L', id: 67 },
            { name: 'Z', id: 68 },
            { name: 'X', id: 69 },
            { name: 'C', id: 70 },
            { name: 'V', id: 71 },
            { name: 'B', id: 72 },
            { name: 'N', id: 73 },
            { name: 'M', id: 74 }
        ]
    },

    /**
     * 组件的方法列表
     */
    methods: {
    	// 中英文键盘
        setKeyboardList() {
            if (this.data.listType) {
                this.setData({
                    keyboardList: this.data.ChineseList
                })
            } else {
                this.setData({
                    keyboardList: this.data.EnglishNumberList
                })
            }
        },
        // 点击输入框
        handleInputClick(e) {
            let { index } = e.currentTarget.dataset
            this.setData({
                inputIndex: index
            })
        },
        // 唤起键盘
        handleShowKeyboard() {
            this.setKeyboardList()
            this.setData({
                showKeyboard: true
            })
        },
        // 点击键盘
        handleKeyboardClick(e) {
            let { name } = e.currentTarget.dataset
            this.data.numArr[this.data.inputIndex] = name
            this.setData({
                inputIndex: this.data.inputIndex < 6 ? this.data.inputIndex + 1 : this.data.inputIndex,
                numArr: this.data.numArr
            })
        },
        // 切换键盘
        handleChange() {
            this.setData({
                listType: !this.data.listType
            })
        },
        // 删除
        handleDelete() {
            this.data.numArr[this.data.inputIndex] = ''
            if (this.data.numArr.length && this.data.inputIndex >= 1) {
                this.setData({
                    inputIndex: this.data.inputIndex - 1,
                    numArr: this.data.numArr
                })
            } else {
                this.setData({
                    inputIndex: 0,
                    numArr: this.data.numArr
                })
            }
        },
        // 完成
        handleFinish() {
            this.setData({
                showKeyboard: false
            })
            // 判断前七位是否有空值
            let hasEmpty = this.data.numArr.length ? this.data.numArr.some((item, index) => index < 7 && item == '') : true
            const str = this.data.numArr.join('')
            // 抛出车牌号
            this.triggerEvent('change', {
                str,
                hasEmpty
            })
        }
    }
})

.wxss 文件

.license-keyboard {
    width: 100%;
    background-color: #fff;
}
.license-keyboard .title,
.license-keyboard .title-required {
    padding: 24rpx 32rpx;
    color: #1d2129;
    position: relative;
}
.license-keyboard .title-required::after {
    position: absolute;
    left: 16rpx;
    color: #f53d3d;
    font-size: 28rpx;
    content: '*';
}
.license-keyboard .input-box {
    padding: 0 32rpx 24rpx 32rpx;
    overflow: hidden;
}
.license-keyboard .input-box .list {
    width: 100%;
    display: flex;
}
.license-keyboard .input-box .list-item {
    height: 96rpx;
    line-height: 96rpx;
    text-align: center;
    background: #f2f3f5;
    border-radius: 8rpx;
    box-sizing: border-box;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    margin-right: 16rpx;
    border: 2rpx solid transparent;
}
.license-keyboard .input-box .energy {
    width: 24rpx;
    font-size: 24rpx;
    color: #00cc33;
    line-height: 28rpx;
    margin: 6rpx auto;
}
.license-keyboard .input-box .list-item:last-child {
    margin-right: 0;
}
.license-keyboard .input-box .active {
    border: 2rpx solid #1979ff;
    background: #e8f5ff;
}
.license-keyboard .keyboard-box {
    font-size: 28rpx;
    background-color: #d0d3d9;
    z-index: 9999;
}
.license-keyboard .keyboard-box .key-title {
    height: 80rpx;
    line-height: 80rpx;
    font-size: 1em;
    background-color: #ffffff;
    border-top: 2rpx solid #f2f2f2;
    color: #5495f6;
    padding: 0px 24rpx;
    text-align: right;
}
.license-keyboard .keyboard-box .key-content {
    padding: 8rpx 4rpx;
    position: relative;
}
.license-keyboard .keyboard-box .key-content .press-wrap {
    width: 100%;
    overflow: hidden;
}
.license-keyboard .keyboard-box .key-content .press-wrap-key {
    float: left;
    padding: 4rpx;
    width: 10%;
    box-sizing: border-box;
}
.license-keyboard .keyboard-box .key-content .press-wrap-key-name {
    height: 90rpx;
    line-height: 90rpx;
    background-color: #ffffff;
    text-align: center;
    border-radius: 8rpx;
    font-size: 1em;
    box-shadow: 0px 4rpx 4rpx 0px #989ba0;
}
.license-keyboard .keyboard-box .key-content .press-wrap .key1 {
    margin-left: 5%;
}
.license-keyboard .keyboard-box .key-content .press-wrap .key2 {
    margin-left: 15%;
}
.license-keyboard .keyboard-box .key-content .btn {
    padding: 4rpx;
    width: 15%;
    box-sizing: border-box;
    height: 90rpx;
    line-height: 90rpx;
    background-color: #a8b0bc;
    text-align: center;
    border-radius: 8rpx;
    font-size: 1em;
    box-shadow: 0px 4rpx 4rpx 0px #989ba0;
}
.license-keyboard .keyboard-box .key-content .btn-change {
    position: absolute;
    left: 4rpx;
    bottom: 12rpx;
}
.license-keyboard .keyboard-box .key-content .btn-delete {
    position: absolute;
    right: 4rpx;
    bottom: 12rpx;
}
.keyboard-overlay {
    display: none !important;
}

3. 组件使用示例

<LicenseKeyboard carNo="{{carNo}}" bindchange="getCarNumber" />

// 获取车牌号
getCarNumber(e) {
    this.setData({
        carNo: e.detail.str,
        isInvalid: e.detail.hasEmpty
    })
},
// 提交
handleSubmit: _.debounce(function (e) {
    if (this.data.carNo && this.data.isInvalid) {
        wx.showToast({
            title: '车牌号格式不正确',
            icon: 'none',
            duration: 3000
        })
        return false
    }
    this.setData({
        saveLoading: true
    })
    let params = {
        carNo: this.data.carNo,
        // 此处代码省略...
    }
    addCustomer(params)
        .then(res => {
            if (res.code == 0) {
                this.setData({
                    saveLoading: false
                })
                // 此处代码省略...
            }
        })
        .catch(err => {
            this.setData({
                saveLoading: false
            })
        })
}, 500)