微信小程序实现车牌号录入

    实现效果如下图所示：

 废话不多说，直接上代码，如果有需要直接复制代码到项目里面，注册组件即可。

<view class="modal-box">
    <view class="modal-wrapper">
        <!-- <view class="modal-title">
            <view class="titleWrapper"><text class="title-text">请录入车牌号</text></view>
            <view class="iconWrapper">
                <image class="close-icon" src="../images/close.png" bindtap="onCancel" />
            </view>
        </view> -->

        <view class="modal-content">
            <view class="modal-input">
                <block wx:for="{
  {8}}" wx:key="index">
                    <view wx:if="{
  {index<=6}}" data-index="{
  {index}}" class="input {
  {selectInputIndex===index?'activeInput':''}}"
                        bindtap='inputCarNum'>
                        <text>{
  {carNumArr[index] || ''}}</text>
                        <!-- <view bindtap="newEnergy" wx:if="{
  {index==7}}">新能源</view> -->
                    </view>
                    <View wx:if="{
  {index==7}}" bindtap="newEnergy" class="new-energy {
  {_newEnergy ? 'activeInput':''}}">
                        <text class="{
  {_newEnergy ? 'new-energy-text' : ''}}">新能源</text>
                    </View>
                </block> 
                <view class="line"></view>
            </view>

        </view>
        <view class="model-btn-group">
            <button bindtap="onOk" class="btn confirm" disabled="{
  {btnDisabled}}">确认</button>
        </view>
    </view>
    <!-- 车牌 -->
    <view class="keyboard {
  {selectInputIndex == null '' : ''}}">
        <!-- 省键盘 -->
        <view class="provinces" hidden='{
  {hiddenPro}}'>
            <view class="pro-li fl" wx:for="{
  {provinceArr}}" wx:key="index" catchtap='proTap' data-province="{
  {item}}">
                {
  {item}}</view>
        </view>
        <!-- 号码键盘	 -->
        <view class="keyNums" hidden='{
  {hiddenStr}}'>
            <view wx:if="{
  {selectInputIndex=&