本文主要是介绍小程序车牌号输入法实例，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

效果图：如下

子组件

组件：wxml

<view wx:if="{{isShow}}" class="vehicle-panel" style="background-color:#DCE2E6">
    <!--省份简写键盘-->
    <block wx:if="{{keyBoardType === 1}}">
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button' wx:for="{{keyVehicle1}}" bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button' wx:for="{{keyVehicle2}}" bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button' wx:for="{{keyVehicle3}}" bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row-last">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button vehicle-panel-row-button-last' bindtap='vehicleTap' data-type="1"
                data-value="{{item}}" wx:for="{{keyVehicle4}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
    </block>
    <!--英文键盘  -->
    <block wx:else>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button vehicle-panel-row-button-number ' bindtap='vehicleTap' data-type="2"
                data-value="{{item}}" wx:for="{{keyNumber}}" wx:for-index="idx" wx:key="item">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" data-type="2"
                class='vehicle-panel-row-button small' wx:for="{{keyEnInput1}}" bindtap='vehicleTap'
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
        </view>
        <view class="vehicle-panel-row">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" data-type="2"
                class='vehicle-panel-row-button small' wx:for="{{keyEnInput2}}" bindtap='vehicleTap'
                data-value="{{item}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
            <view hover-class="vehicle-hover" hover-start-time="10" bindtap='vehicleTap' data-value="delete"
                hover-stay-time="100" class='vehicle-panel-row-button vehicle-panel-row-button-img smalls'>
                <image src='{{OSS}}20210929/4ae39cf45fb6f551.png' class='vehicle-en-button-delete' mode='aspectFit' />
            </view>
        </view>
        <view class="vehicle-panel-row-last">
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100" data-type="2"
                class='vehicle-panel-row-button vehicle-panel-row-button-last small' bindtap='vehicleTap'
                data-value="{{item}}" wx:for="{{keyEnInput3}}" wx:for-index="idx" wx:key="idx">{{item}}</view>
            <view hover-class="vehicle-hover" hover-start-time="10" hover-stay-time="100"
                class='vehicle-panel-row-button vehicle-panel-ok' bindtap='vehicleTap' data-value="ok">确定</view>
        </view>
    </block>
</view>

组件：wxss

:host {
  width: 100%;
}

.vehicle-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 1000;
  padding: 4rpx 14rpx 62rpx 13rpx;
}

.vehicle-panel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-panel-row-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vehicle-panel-row-button {
  background: #FFFFFF;
  box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.15);
  border-radius: 9rpx;
  margin: 14rpx 0 0 0;
  width: 78rpx;
  height: 91rpx;
  text-align: center;
  line-height: 91rpx;
  color: #2F3336;
  font-size: 31rpx;
  font-family: PingFangSC-, PingFang SC;
  font-weight: 400;
}

.vehicle-panel-row-button-number,
.small {
  width: 67rpx !important;
  font-weight: normal;
}
.smalls{
  width: 67rpx !important;
  background: #C2C8CC;
}
.vehicle-panel-row-button-last {
  width: 78rpx;
  height: 91rpx;
  line-height: 91rpx;
}

.vehicle-hover {
  background-color: #ccc;
}

.vehicle-panel-row-button-img {
  display: flex;
  justify-content: center;
  align-items: center;
}

.vehicle-en-button-delete {
  width: 40rpx;
  height: 29rpx;
}

.vehicle-panel-ok {
  background: #C2C8CC;
  box-shadow: 0 2rpx 0 0 rgba(0, 0, 0, 0.15);
  border-radius: 9rpx;
  color: #2F3336;
  width: 212rpx;
  height: 91rpx;
  line-height: 91rpx;
  font-size: 27rpx;
  font-family: PingFangSC-, PingFang SC;
  font-weight: normal;

}

组件：json

{
    "component": true,
    "usingComponents": {}
}

组件：js

Component({

    externalClasses: ['v-panel'],

    properties: {
        isShow: {
            type: Boolean,
            value: false,
        },
        //1为省份键盘，其它为英文键盘
        keyBoardType: {
            type: Number,
            value: 1,
        }
    },
    data: {
        OSS: `${wx.$PUBLIC.statics}`,
        keyVehicle1: '京津沪冀豫云辽黑',
        keyVehicle2: '湘皖鲁新苏浙赣鄂',
        keyVehicle3: '桂甘晋新陕吉闽贵',
        keyVehicle4: '粤川青藏琼宁渝临',
        keyNumber: '1234567890',
        keyEnInput1: 'QWERTYUIOP',
        keyEnInput2: 'ASDFGHJKL',
        keyEnInput3: 'ZXCVBNM',
    },
    methods: {
        vehicleTap: function (event) {
            let val = event.currentTarget.dataset.value;
            let type = event.currentTarget.dataset.type;
            switch (val) {
                case 'delete':
                    this.triggerEvent('delete');
                    break;
                case 'ok':
                    this.triggerEvent('ok');
                    break;
                default:
                    this.triggerEvent('inputchange', {val,type});
            }
        },`在这里插入代码片`
    }
});

父组件

wxml

 <view class="box" bindtap="onClick">
	<view>{{carNo[0]}}</view>
 	<view>{{carNo[1]}}</view>
	<view>{{carNo[2]}}</view>
	<view>{{carNo[3]}}</view>
	<view>{{carNo[4]}}</view>
	<view>{{carNo[5]}}</view>
	<view>{{carNo[6]}}</view>
	<block wx:if="{{carNo.length > 7}}">
		<view>{{carNo[7]}}</view>
	</block>
</view>
<view class="new" wx:if="{{carNo.length <= 7}}">
	<image src="{{OSS}}20210929/ccd9007e50408184.png" />
</view>

<!-- 键盘 -->
<v-panel is-show="{{isShow}}" bindok="inputOk" binddelete="inputdelete" bindinputchange="inputChange" keyBoardType="{{keyBoardType}}" />

js

data: {
        isShow: false,
        keyBoardType: 1,
        carNo: ''
    },
// 弹出键盘事件
    onClick: function () {
        this.setData({
            isShow: !this.data.isShow
        })
    },
    // 键盘change
    inputChange: function (e) {
        let value = e.detail.val;
        let type = e.detail.type;
        let carNo = this.data.carNo;
        carNo += value;
        if (type == 1) {
            this.setData({
                keyBoardType: 2
            })
        }
        this.setData({
            carNo: carNo
        })
    },
    // 键盘确定
    inputOk: function (e) {
        /* isCarPlate用于判断输入的车牌号是否符合规范 */
        if (!this.isCarPlate(this.data.carNo)) {
            wx.showToast({
                title: '请输入正确的车牌号',
                icon: 'none',
            })
            return false;
        }
        this.setData({
            isShow: false,
            // keyBoardType: 1
        })
    },
    // 键盘删除
    inputdelete: function (e) {
        console.log(e);
        let carNo = this.data.carNo;
        carNo = carNo.substring(0, carNo.length - 1);
        if (carNo.length == 0) {
            this.setData({
                keyBoardType: 1
            })
        }
        this.setData({
            carNo,
        })
    },
    /* 判断车牌号 */
    isCarPlate(vehicleNumber) {
        let xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
        let creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
        if (vehicleNumber.length == 7) {
            return creg.test(vehicleNumber);
        } else if (vehicleNumber.length == 8) {
            return xreg.test(vehicleNumber);
        } else {
            return false;
        }
    },

这篇关于小程序车牌号输入法实例的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！