vue+mint-ui 车牌号输入自定义虚拟键盘(二)

注：在(一)中，有完整的子组件代码。
车牌号：第二位一定是大写字母，所以我设置了在没选择第一位是数字键不可用。

图片.png
图片.png
图片.png

挂车号：比车牌号少了一位，多了一个“挂”字。

图片.png

1. 子组件：

<template>
  <div class="carno">
    <div class="carno-keyboard">

      <div class="plate_chinese_box" v-if="show_chinese">
        <mt-button
          v-for="(item, index) in Chinese_List"
          :key="item.id"
          @click="checkChinese(index)"
        >{{item.name}}</mt-button>
      </div>

      <div class="plate_chinese_box plate_number_box" v-if="show_allBoard">
        <mt-button
          v-for="(item, index) in Number_List"
          :key="item.id"
          @click="checkEnglish_num(index, 'num')"
          :disabled = show_isNumber
        >{{item.name}}</mt-button>
        <mt-button
          v-for="(item, index) in English_List"
          :key="item.id"
          @click="checkEnglish_num(index, 'letter')"
        >{{item.name}}</mt-button>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show_chinese: true, // 是否显示汉字键盘
      show_allBoard: false, // 是否显示英文数字键盘
      show_isNumber: true, // 是否启用数字键
      Chinese_List: [
        {name: '京', id: 1},
        {name: '津', id: 2},
        {name: '冀', id: 3},
        {name: '晋', id: 4},
        {name: '蒙', id: 5},
        {name: '辽', id: 6},
        {name: '吉', id: 7},
        {name: '黑', id: 8},
        {name: '沪', id: 9},
        {name: '苏', id: 10},
        {name: '浙', id: 11},
        {name: '皖', id: 12},
        {name: '闽', id: 13},
        {name: '赣', id: 14},
        {name: '鲁', id: 15},
        {name: '豫', id: 16},
        {name: '鄂', id: 17},
        {name: '湘', id: 18},
        {name: '粤', id: 19},
        {name: '桂', id: 20},
        {name: '琼', id: 21},
        {name: '渝', id: 22},
        {name: '川', id: 23},
        {name: '贵', id: 24},
        {name: '云', id: 25},
        {name: '藏', id: 26},
        {name: '陕', id: 27},
        {name: '甘', id: 28},
        {name: '青', id: 29},
        {name: '宁', id: 30},
        {name: '新', id: 31},
        {name: '.', id: 99}
      ],
      Number_List: [
        {name: '1', id: 28},
        {name: '2', id: 29},
        {name: '3', id: 30},
        {name: '4', id: 31},
        {name: '5', id: 32},
        {name: '6', id: 33},
        {name: '7', id: 34},
        {name: '8', id: 35},
        {name: '9', id: 36},
        {name: '0', id: 37}
      ],
      English_List: [
        {name: 'Q', id: 38},
        {name: 'W', id: 39},
        {name: 'E', id: 40},
        {name: 'R', id: 41},
        {name: 'T', id: 42},
        {name: 'Y', id: 43},
        {name: 'U', id: 44},
        {name: 'I', id: 45},
        {name: 'O', id: 46},
        {name: 'P', id: 47},
        {name: 'A', id: 48},
        {name: 'S', id: 49},
        {name: 'D', id: 50},
        {name: 'F', id: 51},
        {name: 'G', id: 52},
        {name: 'H', id: 53},
        {name: 'J', id: 54},
        {name: 'K', id: 55},
        {name: 'L', id: 56},
        {name: 'Z', id: 57},
        {name: 'X', id: 58},
        {name: 'C', id: 59},
        {name: 'V', id: 60},
        {name: 'B', id: 61},
        {name: 'N', id: 62},
        {name: 'M', id: 63},
        {name: '←', id: 99}
      ],
      first: '',
      numArr: []
    }
  },

  props: {
    typeStr: ''
  },

  // 监测车牌号信息的变化，发布事件让父组件订阅
  watch: {
    first () {
      this.$emit('carno-change', this.first, this.numArr)
    },
    numArr () {
      this.$emit('carno-change', this.first, this.numArr)
      if (this.numArr.length < 1) {
        this.show_isNumber = true
      } else {
        this.show_isNumber = false
      }
    },

    typeStr () {
      this.first = ''
      this.numArr = []
      this.show_chinese = true
      this.show_allBoard = false
    }
  },

  methods: {
    // 选择车牌号前面的汉字
    checkChinese (index) {
      // 如果点击删除键，删除第一个格的内容
      if (this.Chinese_List[index].id === 99) {
        this.first = ''
      } else {
        // 把选中的字赋值给第一个格，并且切换键盘
        this.first = this.Chinese_List[index].name
        this.show_chinese = false
        this.show_allBoard = true
      }
    },

    // 选择车牌号后面的数字和字母
    checkEnglish_num (index, type) {
      // 如果点击删除键，删除 numArr 的最后一个值
      if (this.English_List[index].id === 99) {
        this.numArr.pop()
        // 如果 numArr 里面被删的没有值了，切换键盘
        if (this.numArr.length === 0) {
          this.show_chinese = true
          this.show_allBoard = false
        }
      } else {
        // 把选中的值 push 到 numArr 内
        if (type === 'letter') {
          this.numArr.push(this.English_List[index].name)
        }
        if (type === 'num') {
          this.numArr.push(this.Number_List[index].name)
        }
        // 如果 numArr 中的值超过 6 个（车牌号的最大位数），删除最后一个
        if ((this.typeStr === 'carNo') && (this.numArr.length > 6)) {
          this.numArr.pop()
        }
        if ((this.typeStr === 'trailerNo') && (this.numArr.length > 5)) {
          this.numArr.pop()
        }
      }
    }
  }
}
</script>

2. 父组件引用车牌号选择的虚拟键盘

<template>
  <div class="write">
    <div class="row">
      <label class="row-label" @click="clickShowKeyboard('carNo')">
        <span>车牌号</span>
        <input type="text" placeholder="请输入车牌号" v-model="carNo" disabled="true"/>
      </label>
    </div>

    <div class="row" v-if="trailerBlock">
      <label class="row-label" @click="clickShowKeyboard('trailerNo')">
        <span>挂车号</span>
        <input type="text" placeholder="请输入挂车号" v-model="trailerNo" disabled="true"/>
      </label>
    </div>

   <mt-popup style="width:100vw;" v-model="popupVisibleCarNo" position="bottom">
      <div class="carno">
        <div class="carno-header">
          <span class="canael" @click="popupVisibleCarNo = false">取消</span>
          <span class="title">请选择车牌号</span>
          <span class="confirm" @click="confirmCarNo">确认</span>
        </div>
        <div class="carno-input">
          <div class="input-box">
            <li>{{carNoFirst}}</li>
            <li>{{carNmuArr[0]}}</li>
            <li>{{carNmuArr[1]}}</li>
            <li>{{carNmuArr[2]}}</li>
            <li>{{carNmuArr[3]}}</li>
            <li>{{carNmuArr[4]}}</li>
            <li>{{carNmuArr[5]}}</li>
          </div>
        </div>
        <CarNoKeyboard @carno-change="carNoChange" :typeStr="typeStr"></CarNoKeyboard>
      </div>
    </mt-popup>

    <mt-popup style="width:100vw;" v-model="popupVisibleTrailerNo" position="bottom">
      <div class="carno">
        <div class="carno-header">
          <span class="canael" @click="popupVisibleTrailerNo = false">取消</span>
          <span class="title">请选择挂车号</span>
          <span class="confirm" @click="confirmTrailerNo">确认</span>
        </div>
        <div class="carno-input">
          <div class="input-box">
            <li>{{trailerNoFirst}}</li>
            <li>{{trailerNmuArr[0]}}</li>
            <li>{{trailerNmuArr[1]}}</li>
            <li>{{trailerNmuArr[2]}}</li>
            <li>{{trailerNmuArr[3]}}</li>
            <li>{{trailerNmuArr[4]}}</li>
            <li>挂</li>
          </div>
        </div>
        <CarNoKeyboard @carno-change="trailerNoChange" :typeStr="typeStr"></CarNoKeyboard>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import CarNoKeyboardfrom '@/components/CarNoKeyboard'
export default {
  components: {
    CarNoKeyboard
  },
  data () {
    return {
      // 激活键盘时要传过去的参数,用于判断当前是选择车牌号还是挂车号
      typeStr: '',

      // 车牌号码选择
      popupVisibleCarNo: false,
      carNoFirst: '',
      carNmuArr: [],

      // 挂车号选择
      popupVisibleTrailerNo: false,
      trailerNoFirst: '',
      trailerNmuArr: [],

      carNo: '',
       trailerNo: '',
    }，
    methods: {
      // 激活的键盘判断
    clickShowKeyboard (type) {
      this.typeStr = type
      if (type === 'carNo') this.popupVisibleCarNo = true
      if (type === 'trailerNo') this.popupVisibleTrailerNo = true
    },

    /**
    *  mint-ui Picker组件和 Popup组件 的使用
    *  车牌号码选择
    */
    carNoChange (first, numArr) {
      this.carNoFirst = first
      this.carNmuArr = numArr
    },
    confirmCarNo () {
      if (this.carNoFirst !== '' && this.carNmuArr.length === 6) {
        this.popupVisibleCarNo = false
        let numStr = this.carNmuArr.join('')
        this.insurInformation.carNo = this.carNoFirst + numStr
      } else {
        this.$toast({message: '请输入完整', className: 'addClassToast', position: 'top'})
      }
    },

    /**
    *  挂车号选择
    */
    trailerNoChange (first, numArr) {
      this.trailerNoFirst = first
      this.trailerNmuArr = numArr
    },
    confirmTrailerNo () {
      if (this.trailerNoFirst !== '' && this.trailerNmuArr.length === 5) {
        this.popupVisibleTrailerNo = false
        let trailerStr = this.trailerNmuArr.join('')
        this.insurInformation.trailerNo = this.trailerNoFirst + trailerStr + '挂'
      } else {
        this.$toast({message: '请输入完整', className: 'addClassToast', position: 'top'})
      }
    },
}