基於vue-cli的車牌號碼專用鍵盤前端工程

• 基於vue-cli的車牌號碼專用鍵盤,用到了vue、elementui、axios.全部內容較少，放在這做一個記錄。

<template>
  <div id="main">
    <div    class="carNumber" @click="onTypewriting" >
      <el-input    placeholder="請輸入車牌號" v-model="carNumber" >
        <el-button type="primary" slot="append" icon="el-icon-search" @click="onOfferTap">查詢</el-button>
        <el-button type="primary" slot="append" icon="el-icon-refresh" @click="clearNum">重置</el-button>
      </el-input>
    </div>
    <div class="typer" v-show="showTyper!=0"> <!-- ③輸入鍵盤 -->
      <ul v-show="showTyper==1"> <!-- ④省的輸入 -->
        <el-button class="typer-pro"
            v-for="(item,id) in provinces"
            :key="id"
            :class="{'is-closeType':item==='關閉'}"
            @click="input(item)">
          {{item}}
        </el-button>
      </ul>
      <ul v-show="showTyper==2"> <!-- ⑤字母數字的輸入 -->
        <el-button class="typer-num" v-for="(item,id) in keyNums" :key="id"
            :class="{'is-A': item==='A','is-OK':item==='OK','is-Del':item==='Del'}" @click="input(item)">{{item}}</el-button>
      </ul>
    </div>
    <el-dialog
      title="撥打電話"
      :visible.sync="telPhone"
      width="100%"
      @close="telPhoneClose"
    >
      <div style="padding-bottom:20px ">當前車牌號：{{this.carNumber}}</div>
      <el-button type="primary" @click="callPhone">撥 號</el-button>
      <el-button @click="telPhoneClose">取 消</el-button>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      phoneNo: '',
      telPhone: false,
      showTyper: 0, // 輸入法的值，0表示不顯示，1表示顯示省輸入鍵盤，2表示顯示數字字母輸入鍵盤
      provinces: ['京', '滬', '浙', '蘇', '粵', '魯', '晉', '冀', // 省
        '豫', '川', '渝', '遼', '吉', '黑', '皖', '鄂',
        '津', '貴', '雲', '桂', '瓊', '青', '新', '藏',
        '蒙', '寧', '甘', '陝', '閩', '贛', '湘', '關閉'],
      keyNums: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', // 數字字母
        'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P',
        'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L',
        'Z', 'X', 'C', 'V', 'B', 'N', 'M', 'OK', 'Del'],
      carNumber: '', // 輸入的值
      wechatCode: '',
      wechatStatus: ''

    }
  },
  created () {
    this.conPa()
  },
  methods: {
    conPa () {
      this.wechatCode = this.$route.query.code
      this.wechatStatus = this.$route.query.state
    },
    telPhoneClose () {
      this.telPhone = false
    },
    callPhone () {
      window.location.href = 'tel:' + this.phoneNo
    },
    clearNum () {
      this.carNumber = ''
    },
    async onOfferTap () { // 對最終結果進行判斷
    /*  var carNumberReg = /^[京津滬渝冀豫雲遼黑湘皖魯新蘇浙贛鄂桂甘晉蒙陝吉閩貴粵青藏川寧瓊使領A-Z]{1}[A-Z]{1}[A-Z0-9]{4}[A-Z0-9掛學警港澳]{1}$/
      if (!carNumberReg.test(this.carNumber)) {
        this.$message('請輸入正確的車牌號碼')
        return
      } */
      if (this.carNumber.length < 6) {
        this.$error('車牌有誤，請重新輸入')
        return
      }
      const { data: res } = await this.$http.get('Seek/GetPhone', {
        params: { plateNumber: this.carNumber, code: this.wechatCode, status: this.wechatStatus }
      })
      if (res.meta.status !== 200) {
        this.$message({
          message: res.meta.msg,
          type: 'error'
        })
        return
      }
      this.phoneNo = res.data
      this.telPhone = true
    },
    onTypewriting: function () { // 點擊輸入框時，彈出鍵盤
      this.showTyper = 1
      this.changeTyper()
    },
    changeTyper: function () { // 判斷輸入的車牌號處於什么狀態，為空？已輸入第一個值（即省）？輸入省之后的值？
      if (this.carNumber.length >= 1) {
        this.showTyper = 2
      }
      if (this.carNumber.length === 0) {
        this.showTyper = 1
      }
    },
    input: function (item) { // 鍵盤點擊事件，傳入鍵盤本身的值
      if (item === 'OK' || item === '關閉') { // 判斷是否點擊了關閉按鈕
        this.showTyper = 0
        return
      }
      if (item === 'Del') { // 判斷是否點擊了刪除按鈕
        this.carNumber = this.carNumber.slice(0, -1)
        this.changeTyper()
        return
      }
      if (this.carNumber.length < 8) { // 判斷當前的車牌號的數目是否合法，還未超出7位則可繼續輸入
        this.carNumber = this.carNumber + item
        this.changeTyper()
      } else {
        this.$error('車牌號碼超出正常范圍')
      }
    }
  }
}
</script>
<style >
</style>