车牌号输入功能实现

车牌号输入功能实现直接用即可

<template>
  <view class="license-plate-input">
    <view class="plate-display">
      <view 
        class="plate-item" 
        :class="{ 'plate-item-active': index === activeIndex }"
        v-for="(item, index) in plateArray" 
        :key="index"
        @tap="focusInput(index)"
      >
        {{ item || '' }}
      </view>
    </view>
    
    <view class="keyboard-container" v-if="showKeyboard">
      <view class="keyboard-header">
        <text class="keyboard-title">{{ keyboardType === 'province' ? '选择省份' : keyboardType === 'alphabet' ? '选择字母' : '选择数字/字母' }}</text>
        <u-icon name="close" @click="showKeyboard = false"></u-icon>
      </view>
      
      <view class="keyboard-keys">
        <view 
          class="key-item" 
          v-for="(key, index) in currentKeys" 
          :key="index"
          @tap="selectKey(key)"
        >
          {{ key }}
        </view>
        <view 
          class="key-item key-delete" 
          @tap="deleteKey"
          v-if="keyboardType !== 'province'"
        >
          删除
        </view>
      </view>
      
      <view class="keyboard-toggle" v-if="keyboardType !== 'province'">
        <view 
          class="toggle-btn" 
          :class="{ 'active': keyboardType === 'alphabet' }"
          @tap="switchKeyboard('alphabet')"
        >
          ABC
        </view>
        <view 
          class="toggle-btn" 
          :class="{ 'active': keyboardType === 'number' }"
          @tap="switchKeyboard('number')"
        >
          123
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'LicensePlateInput',
  data() {
    return {
      plateArray: new Array(8).fill(''),
      activeIndex: 0,
      showKeyboard: false,
      keyboardType: 'province', // province, alphabet, number
      provinceKeys: [
        '京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', 
        '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', 
        '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁', 
        '新', '港', '澳', '台', '使', '领', '警', '学', '试'
      ],
      alphabetKeys: [
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
        'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
        'W', 'X', 'Y', 'Z'
      ],
      numberKeys: [
        '0', '1', '2', '3', '4', '5', '6', '7', '8', '9',
        'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K',
        'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V',
        'W', 'X', 'Y', 'Z'
      ]
    }
  },
  computed: {
    currentKeys() {
      switch(this.keyboardType) {
        case 'province':
          return this.provinceKeys;
        case 'alphabet':
          return this.alphabetKeys;
        case 'number':
          return this.numberKeys;
        default:
          return this.provinceKeys;
      }
    }
  },
  methods: {
    focusInput(index) {
      this.activeIndex = index;
      this.showKeyboard = true;
      
      // 根据位置确定键盘类型
      if (index === 0) {
        this.keyboardType = 'province';
      } else if (index === 1) {
        this.keyboardType = 'alphabet';
      } else {
        this.keyboardType = 'number';
      }
    },
    
    selectKey(key) {
      // 设置当前位的值
      this.$set(this.plateArray, this.activeIndex, key);
      
      // 自动跳转到下一位
      if (this.activeIndex < 7) {
        this.activeIndex++;
        
        // 根据位置自动切换键盘类型
        if (this.activeIndex === 1) {
          this.keyboardType = 'alphabet';
        } else {
          this.keyboardType = 'number';
        }
      } else {
        // 最后一位输入完成后隐藏键盘
        this.showKeyboard = false;
      }
    },
    
    deleteKey() {
      if (this.activeIndex > 0) {
        // 清空当前位
        this.$set(this.plateArray, this.activeIndex, '');
        // 如果当前位已空，则跳转到上一位
        if (this.plateArray[this.activeIndex] === '') {
          this.activeIndex--;
        }
      } else {
        // 第一位时直接清空
        this.$set(this.plateArray, this.activeIndex, '');
      }
    },
    
    switchKeyboard(type) {
      this.keyboardType = type;
    },
    
    getPlateNumber() {
      return this.plateArray.join('');
    },
    
    clearPlate() {
      this.plateArray = new Array(8).fill('');
      this.activeIndex = 0;
    }
  }
}
</script>

<style lang="scss" scoped>
.license-plate-input {
  padding: 20rpx;
}

.plate-display {
  display: flex;
  justify-content: center;
  margin-bottom: 40rpx;
}

.plate-item {
  width: 60rpx;
  height: 100rpx;
  border: 2rpx solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: bold;
  margin: 0 10rpx;
  border-radius: 8rpx;
  
  &.plate-item-active {
    border-color: #2979ff;
    box-shadow: 0 0 10rpx rgba(41, 121, 255, 0.3);
  }
}

.keyboard-container {
  background-color: #f5f5f5;
  border-radius: 20rpx 20rpx 0 0;
  padding: 20rpx;
}

.keyboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 2rpx solid #eee;
}

.keyboard-title {
  font-size: 32rpx;
  font-weight: bold;
}

.keyboard-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx 0;
}

.key-item {
  width: calc(10% - 10rpx);
  height: 70rpx;
  background-color: #fff;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10rpx 5rpx;
  font-size: 32rpx;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
  
  &.key-delete {
    background-color: #ff5a5f;
    color: #fff;
    width: 15%;
  }
}

.keyboard-toggle {
  display: flex;
  justify-content: center;
  padding: 20rpx 0;
}

.toggle-btn {
  padding: 10rpx 30rpx;
  background-color: #e0e0e0;
  border-radius: 30rpx;
  margin: 0 20rpx;
  font-size: 28rpx;
  
  &.active {
    background-color: #2979ff;
    color: #fff;
  }
}
</style>