标签：输入法 idx 车牌号 item 实例 vehicle carNo data wx

效果图：如下

子组件

组件：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;
        }
    },

标签：输入法,idx,车牌号,item,实例,vehicle,carNo,data,wx
来源： https://blog.csdn.net/Wang_MengHan/article/details/120553308

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。