hunanzeyuprogram/components/CarNumInput/index.wxml

<!--components/CarNumInput/index.wxml-->
<view class="con-query">
  <view class='plate-input-text' bindtap='changeplate'>
  </view>
  <view class="plate-input-body">
    <view class="plate-input-content">
      <view class="{{inputOnFocusIndex=='0'?'plate-nums-foc':'plate-nums-first'}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="0">{{inputPlates.index0}}</text>
      </view>
      <view class="{{inputOnFocusIndex=='1'?'plate-nums-foc':'plate-nums-first'}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="1">{{inputPlates.index1}}</text>
      </view>
      <view style="width:8px;height:38px;line-height:38px;margin-right: 4rpx;">-</view>
      <view class="{{inputOnFocusIndex=='2'?'plate-nums-foc':'plate-nums-first'}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="2">{{inputPlates.index2}}</text>
      </view>

      <view class="{{inputOnFocusIndex=='3'?'plate-nums-foc':'plate-nums-first'}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="3">{{inputPlates.index3}}</text>
      </view>
      <view class="{{inputOnFocusIndex=='4'?'plate-nums-foc':'plate-nums-first'}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="4">{{inputPlates.index4}}</text>
      </view>

      <view class="{{inputOnFocusIndex=='5'?'plate-nums-foc':'plate-nums-first'}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="5">{{inputPlates.index5}}</text>
      </view>
      <view class="{{inputOnFocusIndex=='6'?'plate-nums-foc':'plate-nums-first'}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="6">{{inputPlates.index6}}</text>
      </view>
      <!-- 新能源 -->
      <view class="plate-nums-IsEng {{inputOnFocusIndex=='7'?'plate-nums-foc':'plate-nums-first'}}" wx:if="{{isNewEnergy}}">
        <text bindtap="inputClick" class="plate-num-text" data-id="7">{{inputPlates.index7}}</text>
        <text class="delNewEng" data-id="7" bindtap='changeplate'>-</text>
      </view>
      <view wx:else class="plate-nums-nullEng {{inputOnFocusIndex=='7'?'plate-nums-foc':'plate-nums-first'}}" data-id="7" bindtap='changeplate'>
        <text>新能源</text>
      </view>

    </view>
  </view>
  <!-- 用于切换新能源的按钮 -->
  <!-- <view class='plate-input-flag' bindtap='changeplate'>
    <text wx:if="{{isNewEnergy}}" class="new-energy">-新能源</text>
    <text wx:if="{{!isNewEnergy}}" class="new-energy">+新能源</text>
  </view> -->
</view>

<view class="keyboard" wx:if="{{isKeyboard}}">
  <view class="kb_top">
    <text catchtap="tapSpecBtn" data-index="1" style="position:absolute;right:0;display:block;height:74rpx;padding:0 34rpx; color:#FFB93F;line-height:74rpx; font-size: 30rpx;">关闭</text>
  </view>

  <view style="width:100%; text-align:center;" wx:if="{{isNumberKB}}">
    <view style="width:99%;display:flex;text-align:center;margin:0 auto">
      <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=9}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
    </view>
    <view style="display:flex;text-align:center; width:90%;margin:0 auto">
      <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=18&&idx>9}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
    </view>

    <view style="display:flex;text-align:center; width:70%;margin:0 auto">
      <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx<=25&&idx>18}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
    </view>

    <view style="display:flex; width:50%;margin:0 auto;text-align:center;">
      <view catchtap="tapKeyboard" class="td td_nor" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>25}}" wx:for="{{keyboard1}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
    </view>

    <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0" hoverStayTime="80">
      <image class="del-img" data-index="0" mode="scaleToFill" src="../../images/delete.png"></image>
    </view>
  </view>

  <view style="width:100%; text-align:center;" wx:if="{{!isNumberKB}}">
    <view style="width:99%;display:flex;text-align:center;margin:0 auto">
      <view class="td td_num board_bg" wx:if="{{!tapNum&&idx<=9}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
    </view>
    <view style="width:99%;display:flex;text-align:center;margin:0 auto">
      <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&idx<=9}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>

    </view>

    <view style="width:99%;display:flex;text-align:center;margin:0 auto">
      <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>9&&idx<=17}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
      <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&18<=idx&&idx<=19}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
      <view class="td td_num board_bg" wx:if="{{!tapNum&&18<=idx&&idx<=19}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
    </view>

    <view style="width:99%;display:flex;text-align:center;margin:0 auto">
      <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>19&&idx<=28}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>

      <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{tapNum&&29==idx}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>

      <view class="td td_num board_bg" wx:if="{{!tapNum&&29==idx}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>

    </view>
    <view style="width:69%;display:flex;text-align:left; margin-left:5rpx;">
      <view catchtap="tapKeyboard" class="td td_num" data-index="{{idx}}" data-val="{{itemName}}" hoverClass="board_bg" hoverStartTime="0" hoverStayTime="80" wx:if="{{idx>29}}" wx:for="{{keyboardNumber}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
        {{itemName}}
      </view>
    </view>

    <view bindtap="tapSpecBtn" class="del-first" data-index="0" hoverClass="del-hover" hoverStartTime="0" hoverStayTime="80">
      <image class="del-img" data-index="0" mode="scaleToFill" src="../../images/delete.png"></image>
    </view>

  </view>

</view>

<!-- 使用方法
<car-num-input bind:setCarNum="getCarNum"></car-num-input>
引用
 "car-num-input": "/components/CarNumInput/index",
//获取值
   getCarNum: function (e) {
    this.setData({
      getCarNum: e.detail.carNum
    })
    console.log('获取值：', e.detail.carNum)
  },
 -->