话不多说,先看图
使用方法:
一、将组件代码放入项目任意目录
二、在需要使用键盘组件的页面json文件配置引入组件
三、在模板页面wxml调用组件
<carNumber custom-input-class="carnum-box" custom-item-class="carnum-input" custom-energy-icon="energy-icon" defaultNum="{{plateNum}}" bind:change="getCarNumChange" />
四、在js页面接收组件输入的车牌号
getCarNumChange(e) {
console.log(e.detail)
this.setData({plateNum : e.detail})
},
如果需要微调样式,可以通过class进行调整
.carnum-box{background-color: #ffffff;padding: 0rpx;}
.carnum-input{padding: 0 !important;width: 72rpx !important; height: 72rpx !important; background: #F5F5FA; border-radius: 8rpx !important;line-height: 72rpx; margin: 0 4rpx !important;}
.energy-icon{width: 60rpx !important; height: 68rpx !important; line-height: 0 !important; margin:0 8rpx !important;}