uniapp项目输入车牌号组件

 实现样式

组件代码keyboard-car.vue

<template>
  <view>
    <view class="plate" :class="{ show: show }">
      <view class="itemFirst" :class="{ active: index === 0 || index === 1 }">
        <view
          class="item item1"
          @click="handleChange(0)"
          :class="{ active: index === 0 || index === 1 }"
        >
          {{ plateNumber[0] || '' }}
        </view>
        <view
          class="item item1"
          @click="handleChange(1)"
          :class="{ active: index === 0 || index === 1 }"
          >{{ plateNumber[1] }}</view
        >
      </view>
      <view class="point">●</view>
      <view class="item" :class="{ active: index === 2 }" @click="handleChange(2)">{{
        plateNumber[2]
      }}</view>
      <view class="item" :class="{ active: index === 3 }" @click="handleChange(3)">{{
        plateNumber[3]
      }}</view>
      <view class="item" :class="{ active: index === 4 }" @click="handleChange(4)">{{
        plateNumber[4]
      }}</view>
      <view class="item" :class="{ active: index === 5 }" @click="handleChange(5)">{{
        plateNumber[5]
      }}</view>
      <view class="item" :class="{ active: index === 6 }" @click="handleChange(6)">{{
        plateNumber[6]
      }}</view>
      <view class="item new-energy" :class="{ active: index === 7 }" @click="handleChange(7)">
        <!-- <view class="newDot"> 新能源</view> -->
        <view class="newDotadd"> 新能源</view>
        <view class="" v-if="plateNumber[7] || plateNumber[7] == 0">
          <text>{{ plateNumber[7] }}</text>
        </view>
      </view>
    </view>
    <section class="panel" :class="{ show: show }">
      <view class="header">
        <view @click="handleReset">重置</view>
        <view @click="show = false">完成</view>
      </view>
      <view class="panelList">
        <view class="item" v-for="(item, idx) of currentDatas" :key="idx">
          <view
            :class="{ disabled: (index == 1 && idx < 10) || (index > 1 && index < 6 && idx > 33) }"
            v-if="item !== ''"
            @click="handleClickKeyBoard(item, idx)"
            >{{ item }}</view
          >
        </view>
        <view class="item backspace" :class="{ special: index === 0 }" @click="handleDelete"
          ><u-icon
            name="backspace"
            color="#000"
            id="backspace"
            style="font-size: 26px !important"
          ></u-icon
        ></view>
      </view>
    </section>
  </view>
</template>
<script>
export default {
  name: 'plate',
  props: {
    number: {
      type: Array,
      default: []
    }
  },
  watch: {
    number(newVal, oldVal) {
      this.plateNumber = newVal
    }
  },
  data() {
    return {
      show: false,
      plateNumber: this.number,
      index: -1,
      delIndex: -1,
      areaDatas: [
        '京',
        '津',
        '渝',
        '沪',
        '冀',
        '晋',
        '辽',
        '吉',
        '黑',
        '苏',
        '浙',
        '皖',
        '闽',
        '赣',
        '鲁',
        '豫',
        '鄂',
        '湘',
        '粤',
        '琼',
        '川',
        '贵',
        '云',
        '陕',
        '甘',
        '青',
        '蒙',
        '桂',
        '宁',
        '新',
        '藏',
        '使',
        '领',
        '',
        '',
        '',
        '',
        '',
        ''
      ],
      characterDatas: [
        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: {
    currentDatas() {
      return this.index === 0 ? this.areaDatas : this.characterDatas
    }
  },
  methods: {
    handleChange(index) {
      // console.log(index)
      this.index = index
      this.delIndex = index + 1
      this.show = true
    },
    handleClickKeyBoard(item, idx) {
      // console.log(item, idx, 'item, idx')
      // console.log(this.index, 'this.index')
      if ((this.index === 1 && idx < 10) || (this.index > 1 && this.index < 6 && idx > 33)) {
        return
      }
      if (this.index < 8) {
        this.$set(this.plateNumber, this.index, item)
        this.$emit('myPlateChange', this.plateNumber)
        if (this.delIndex < 8) {
          this.delIndex++
        }
      }
      if (this.index < 7) {
        this.index++
      }
      // if(    this.delIndex<8){
      //   this.delIndex++
      // }
      // console.log(this.delIndex, 'this.delIndex')
      // console.log(this.plateNumber, 'this.plateNumber')
    },
    // 重置
    handleReset() {
      this.index = 0
      this.delIndex = 0
      for (let i = 0; i < 8; i++) {
        this.$set(this.plateNumber, i, '')
      }
      this.$emit('myPlateChange', this.plateNumber)
    },
    // 删除
    handleDelete() {
      // console.log('删前', this.plateNumber, 'index', this.index, 'delIndex', this.delIndex)
      this.$set(this.plateNumber, this.delIndex - 1, '')
      this.$emit('myPlateChange', this.plateNumber)
      // if (this.index > 0) {
      //   this.index--
      // }
      this.delIndex--
      this.index = this.delIndex
      if (this.index > 7) {
        this.index = 7
      }
      if (this.delIndex <= 0) {
        this.index = 0
        this.delIndex = 0
      }
      // console.log('删后', this.plateNumber, 'index', this.index, 'delIndex', this.delIndex)
    }
  }
}
</script>
<style scoped lang="scss">
.new-energy {
  box-sizing: border-box;
  border: 2rpx dashed #03be9f;
  font-weight: bold;
  height: 84rpx;
  background: red;
  width: 100%;
  position: relative;
  .newDotadd {
    width: 58rpx;
    color: #ffff;
    height: 34rpx;
    font-size: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -20rpx;
    left: 3rpx;
    border-radius: 15rpx;
    background: #03be9f;
  }
  // .newDot {
  //   display: flex;
  //   width: 55rpx;
  //   height: 30rpx;
  //   border-radius: 50rpx;
  //   background: #03be9f;
  //   font-size: 14rpx;
  //   color: #fff;
  //   position: absolute;
  //   top: -20rpx;
  //   left: 7rpx;
  // }
}

.active {
  background-color: #62a4fe !important;
}
.plate {
  display: flex;
  justify-content: space-between;

  .item {
    width: 66rpx;
    height: 84rpx;
    background-color: #f3f4f7;
    border-radius: 8rpx;
    text-align: center;
    line-height: 84rpx;
    font-size: 32rpx;
    color: rgba(0, 0, 0, 0.9);
    font-weight: bold;
    position: relative;
  }

  .itemFirst {
    display: flex;
    border-radius: 8rpx;
    padding: 18rpx 0;
    height: 84rpx;
    box-sizing: border-box;
    background-color: #f3f4f7;

    .item1 {
      height: 48rpx;
      line-height: 48rpx;
      border-radius: 0;
    }

    .item:nth-child(1) {
      border-right: 2rpx solid #dfdfdf;
    }
  }

  .emptyNew {
    height: 54px;
    line-height: 30rpx;

    text {
      color: #03be9f;
      font-size: 18rpx;
    }
  }

  .point {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    color: #bdc4cc;
    font-size: 18rpx;
  }

  .triangle {
    width: 0;
    height: 0;
    border: 6rpx solid transparent;
    border-right-color: #00c69d;
    border-bottom-color: #00c69d;
    border-radius: 1rpx 2rpx 1rpx;
    position: absolute;
    right: 6rpx;
    bottom: 6rpx;
  }
}

.panel {
  position: fixed;
  left: 0;
  width: 100%;
  bottom: 0;
  z-index: 999;
  box-sizing: border-box;
  background-color: #f5f5f5;
  transition: all 0.3s ease;
  transform: translateY(100%);

  &.show {
    transform: translateX(0);
  }

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24rpx;
    height: 96rpx;
    color: #2080f7;
    font-size: 34rpx;
  }

  .panelList {
    padding: 0 19rpx 20rpx;

    .item {
      display: inline-block;
      width: 80rpx;
      // width: 12.5%;
      height: 84rpx;
      margin-right: 8rpx;
      margin-bottom: 8rpx;
      vertical-align: top;
      border-radius: 8rpx;

      view {
        width: 100%;
        height: 84rpx;
        line-height: 84rpx;
        border-radius: 6rpx;
        background: #fefffe;
        font-size: 36rpx;
        color: rgba(0, 0, 0, 0.9);
        font-weight: bold;
        text-align: center;

        &.disabled {
          background-color: rgba(254, 255, 254, 0.6);
          color: rgba(0, 0, 0, 0.23);
        }
      }

      :nth-of-type(10n) {
        margin-right: 0;
      }
    }

    .backspace {
      vertical-align: top;
      font-size: 48rpx;
      font-weight: bold;
      text-align: center;
      height: 84rpx;
      line-height: 84rpx;
      border-radius: 6rpx;
      background: #fefffe;
      color: rgba(0, 0, 0, 0.9);
    }
  }
}
::v-deep {
  .u-icon__icon {
    display: block;
    width: 100% !important;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  #backspace {
    span {
      font-size: 26px !important;
    }
  }
}
</style>

页面使用

<template>
...自己代码
  <keyboard-car :number="plateNumber" @myPlateChange="plateChange"></keyboard-car>
...自己代码
<template>

<script>

import keyboardCar from '../../components/keyboard-car/keyboard-car'
export default {
  data() {
    return {
   plateNumber: [], //string[]
},
  component: {
    name: keyboardCar
  },
  methods: {
    // 获取车牌
    plateChange(val) {
      this.form.plateNum = val.join('')
    },
}
}
</script>