用vue写的移动端车牌号输入法

效果图:

 (录制了视频演示,然而不会上传.....心塞.....) 

本页面所在项目已上传GitHub,github下载地址:https://github.com/dan-Zd/car-vueapp     车牌键盘页面在 README.md有说明

 

代码部分:

车牌号输入框---html

<div class="content-car-number">
    <div class="car-content-title">
        <span>车牌号</span>
        <label class="ze-checkbox"><input type="checkbox" v-model="checkbox" @change="carTypeChange">
            <span class="ze-checkbox-icon" style="width: 20px;height: 20px;color: rgb(76, 216, 100);">
                <i style="width: 6px;height: 12px;"></i>
            </span>
            <span class="ze-checkbox-text">新能源</span>
        </label>
    </div>
    <div class="content-section">
        <div class="content-section-flex flex-card">
            <div class="content-section-flex flex-card-border">
                 <button id="font" class="flex-btn" @click="btnClickYue" v-bind:class="{isClick: isYue }">{{areaName}}</button>
          <span class="blank-border blank-border-first"></span>           <button id='letter' class="flex-btn" @click="btnClickA" v-bind:class="{isClick: isA}">{{areaLetter}}</button>           <div class="flex-mid"><span></span></div>           <div class="flex-btns">             <button id='numOne' @click="btnClickNum('one')" v-bind:class="{isNumClick: isNumOne }">{{numOne}}</button>             <span class="blank-border"></span>             <button id='numTwo' @click="btnClickNum('two')" v-bind:class="{isNumClick: isNumTwo }">{{numTwo}}</button>             <span class="blank-border"></span>             <button id='numThree' @click="btnClickNum('three')" v-bind:class="{isNumClick: isNumThree }">{{numThree}}</button>             <span class="blank-border"></span>             <button id='numFour' @click="btnClickNum('four')" v-bind:class="{isNumClick: isNumFour }">{{numFour}}</button>             <span class="blank-border"></span>             <button id='numFive' @click="btnClickNum('five')" v-bind:class="{isNumClick: isNumFive }">{{numFive}}</button>             <span class="blank-border" v-if="checkbox"></span>             <button v-if="checkbox" id='numSix' @click="btnClickNum('six')" v-bind:class="{isNumClick: isNumSix }">{{numSix}}</button>           </div>        </div>      </div>    </div> </div>

键盘—html

<div class="keyboard" v-if="keyboardShow" :class='{animationDown:isDown,animationUp:isUp}'>
  <button class="btn-complete" @click="completeClick"><span>完成</span></button>
  <div v-if="keyboard == 'txt'">
    <div class="keyboard-row" v-for="(item,rows) in carTxt">
      <button class="keyboard-row-item" v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}</button>
    </div>
    <div class="keyboard-row">
    <!-- <div class="keyboard-row-items"> -->
      <button class="keyboard-row-item bottom" @click="btnBottomClick('新')"></button>
      <button class="keyboard-row-item bottom" @click="btnBottomClick('临')"></button>
      <button v-for="j in noneBottomtxt" class="none-botton">{{j}}</button>
      <div class="keyboard-row-item clear" @click="clearClick">
        <img src="../assets/icon_input_delete.png" alt="删除">
      </div>
    <!-- </div> -->
    </div>
  </div>
  <div v-if="keyboard == 'num'">
    <div class="keyboard-row" v-for="(item,rows) in carNum">
      <button :disabled="!isSelectl?isDisable && i<10 :isDisable&& rows!=0 " class="keyboard-row-item" v-for="(i,index) in item.name" @click="btnWordClick(rows,index,i)">{{i}}
      </button>
    </div>
    <div class="keyboard-row">
    <!-- <div class="keyboard-row-bottom"> -->
      <button :disabled="isSelectl" v-for="item in carNumBottom" class="keyboard-row-item bottom" @click="btnBottomNumClick(item)">{{item}}</button>
      <button v-for="j in noneBottom" class="none-botton">{{j}}</button>
      <div class="keyboard-row-item clear" @click="clearClick">
        <img src="../assets/icon_input_delete.png" alt="删除">
      </div>
    <!-- </div> -->
    </div>
  </div>
</div>

Css部分:

//车牌输入框
.content-car-number {
  padding: 64px 0 0;
  .car-content-title {
    display: flex;
    justify-content: space-between;
    padding: 0 32px;
    margin-bottom: 16px;
    span {
      font-size: 34px;
    }
    .ze-checkbox {
      display: flex;
      align-items: center;
    }
    .ze-radio-text {
      font-size: 28px;
    }
    .ze-checkbox-icon {
      color: #FFEDB1 !important;
      margin-right: 8px;
    }
  }
  .content-section {
    .content-section-flex {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 40px;
      margin-bottom: 35px;
      .blank-border {
      height: 44px;
      width: 1px; /*no*/
      border-right: 1px solid #ddd; /*no*/
      margin-top: 27px;
      float: left;
      margin-left: -15px;
      z-index: 1;
      &.blank-border-first {
        margin-top: 0px;
      }
    }
    &.flex-card {
      color: #000;
      .flex-btn {
        width: 98px;
        height: 98px;
        border: none;
        text-align: center;
        background: #fff;
        font-size: 40px;
        color: #000;
      }
      .flex-btns {
        text-align: center;
        background: #fff;
        width: fit-content;
        position: relative;
        height: 98px;
        button {
          width: 98px;
          height: 98px;
          border: none;
          font-size: 40px;
          color: #000;
          border-radius: 50%;
          background: transparent;
          float: left;
          margin-left: -20px;
          z-index: 2;
          position: relative;
          &:first-child {
            margin-left: 0;
          }
        }
      }
      .flex-mid {
        margin: 0 0.1rem;
        span {
          display: block;
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background: #ddd;
        }
      }
      .isClick {
          border: 1px solid #ffc200; /*no*/
          z-index: 50;
          border-radius: 8px;
       }
       .isNumClick {
          border-radius: 8px !important;
          border: 1px solid #ffc200 !important; /*no*/
          z-index: 10;
          background-color: #fff !important;
       }
     }
     .flex-card-border {
        border: 1px solid #ddd; /*no*/
        border-radius: 8px;
     }
    }
  }
}

//键盘
.keyboard {
  width: 100%;
  height: 502px;
  position: fixed;
  bottom: -502px;
  background: #eeeeee;
  z-index: 10;
  &.animationDown {
    animation: slide_dowms 0.3s ease-out;
    animation-fill-mode: forwards;
  }
  &.animationUp {
    animation: slide_ups 0.3s ease-out;
    animation-fill-mode: forwards;
  }
  .btn-complete {
    height: 72px;
    text-align: right;
    color: #ffc200;
    font-size: 30px;
    width: 100%;
    background: #fff;
    border: none;
    border-top: 1px solid #eee;
    margin-bottom: 30px;
    span {
      margin-right: 30px;
    }
  }
  .keyboard-row {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
    color: #333;
    &:first-child {
      margin-top: 0;
    }
    .keyboard-row-items {
      display: flex;
      justify-content: left;
    }
    .keyboard-row-bottom {
      display: flex;
      justify-content: space-between;
    }
    .keyboard-row-item {
      width: 66px;
      height: 80px;
      background: #fff;
      font-size: 34px;
      text-align: center;
      border: 1px solid #ccc; /*no*/
      border-radius: 10px;
      color: #333;
      &.bottom {
        height: 80px;
        width: 66px;
        line-height: 80px;
        background: #fff;
        color: #333;
        /*margin-right: 0.08rem;*/
      }
      &.clear {
        width: 140px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 62px;
        }
      }
    }
    .none-botton {
      border: none;
      height: 80px;
      width: 66px;
      visibility: hidden;
    }
  }
  button {
    &:active {
      background: #f4f4f4 !important;
      color: #999 !important;
    }
  }
}
//键盘滑动 @keyframes slide_ups
{   from {     bottom: -502px;   }   to {     bottom: 0px;   } } @keyframes slide_dowms {   from {     bottom: 0px;   }   to {     bottom: -502px;   } }

javascript部分

data () { //有一些别的数据,实在懒得一一挑出来了
  return {
    toastTxt: '',
    isToastShow: false,
    isStr: '20px',
    isEnd: '300px',
    ispickerDateShow: '-400px',
    dateTitle: '开始',
    beginTimeVal: '',
    overTimeVal: '',
    isFeeHourClick: true,
    checkbox: false,
    isDown: false,
    isUp: false,
    selected: null,
    isSelectx: false,
    isSelectl: false,
    key: '1',
    areaName: '',
    areaLetter: '',
    numOne: '',
    numTwo: '',
    numThree: '',
    numFour: '',
    numFive: '',
    numSix: '',
    isYue: false,
    keyboardShow: false,
    keyboard: false,
    isA: false,
    isNumOne: false,
    isNumTwo: false,
    isNumThree: false,
    isNumFour: false,
    isNumFive: false,
    isNumSix: false,
    isDisable: false,
    carTxt: [
      { name: ['粤', '京', '冀', '沪', '津', '晋', '蒙', '辽', '吉', '黑'] },
      { name: ['苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '桂'] },
      { name: ['琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青', '宁'] }
    ],
    carNumBottom: ['W', 'X', 'Y', 'Z'],
    noneBottom: ['', '', '', ''],
    noneBottomtxt: ['', '', '', '', '', ''],
    carNum: [
      { name: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'] },
      { name: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K'] },
      { name: ['L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V'] }
    ],
    addedCarNum: ''
  }
},
watch: { 
  checkbox: function (val, oldval) { //监听是否为新能源
    this.isNumOne = false
    this.isNumTwo = false
    this.isNumThree = false
    this.isNumFour = false
    this.isNumFive = false
    this.isNumSix = false
    const vm = this
    if (!val) {
    // 切换到普通车牌
      if (vm.numFour) {
        vm.isNumFive = true
        vm.key = 7
      }
      } else {
      // 切换到新能源车牌
        if (vm.numFive) {
        vm.isNumSix = true
        vm.key = 8
      }
    }
  },
  numFive: function (val) { //监听是否为普通车牌最后一位
    if (!this.checkbox && val) {
      this.isUp = false
      this.isDown = true
      this.keyboardShow = false
      this.isNumFive = false
    }
  },
  numSix: function (val) { //监听是否为新能源车牌最后一位
    if (this.checkbox && val) {
      this.isUp = false
      this.isDown = true
      this.keyboardShow = false
      this.isNumSix = false
    }
  }
},
//methods
methods: {
  // 车牌类型切换
  carTypeChange (val) {
    this.isNumOne = false
    this.isNumTwo = false
    this.isNumThree = false
    this.isNumFour = false
    this.isNumFive = false
    this.isNumSix = false
    if (!val) {
    // 切换到普通车牌
      if (this.numFour) {
        this.isNumFive = true
        this.key = 7
      }
    } else {
    // 切换到新能源车牌
      if (this.numFive) {
        this.isNumSix = true
        this.key = 8
      }
    }
  },
  // 车牌号第一位输入框选择
  btnClickYue () {
    this.isYue = true
    this.isA = false
    this.isUp = true
    this.isNumOne = false
    this.isNumTwo = false
    this.isNumThree = false
    this.isNumFour = false
    this.isNumFive = false
    this.isNumSix = false
    this.keyboardShow = true
    this.keyboard = 'txt'
    this.key = 1
  },
  // 键盘选择显示
  btnWordClick (rows, index, i) {
    this.selected = i
    if (this.key === 1) {
      if (this.areaName === '临') {
        this.areaLetter = ''
        this.numOne = ''
        this.numTwo = ''
        this.numThree = ''
        this.numFour = ''
        this.numFive = ''
        this.numSix = ''
      }
      this.areaName = i
      this.isSelectl = false
      document.getElementById('letter').click()
    } else if (this.key === 2) {
      this.areaLetter = i
      document.getElementById('numOne').click()
    } else if (this.key === 3) {
      this.numOne = i
      document.getElementById('numTwo').click()
    } else if (this.key === 4) {
      this.numTwo = i
      document.getElementById('numThree').click()
    } else if (this.key === 5) {
      this.numThree = i
      document.getElementById('numFour').click()
    } else if (this.key === 6) {
      this.numFour = i
      document.getElementById('numFive').click()
    } else if (this.key === 7) {
      this.numFive = i
      if (this.checkbox) {
        document.getElementById('numSix').click()
      }
    } else if (this.key === 8) {
      this.numSix = i
    }
    if (this.key === 7 || this.key === 8) {
      this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学']
      this.noneBottom = ['']
    } else if (this.key === 3 || this.key === 4 || this.key === 5 || this.key === 6) {
      this.carNumBottom = ['W', 'X', 'Y', 'Z']
      this.noneBottom = ['', '', '', '']
    }
  },
  // 车牌第一位选择‘临’,’新‘后的键盘显示
  btnBottomClick (val) {
    if (val === '新') {
      if (this.areaName === '临') {
        this.areaLetter = ''
        this.numOne = ''
        this.numTwo = ''
        this.numThree = ''
        this.numFour = ''
        this.numFive = ''
        this.numSix = ''
      }
      this.areaName = '新'
      this.isSelectx = true
      this.isSelectl = false
      document.getElementById('letter').click()
    } else if (val === '临') {
      this.areaName = '临'
      this.isSelectl = true
      this.isSelectx = false
      this.isDisable = true
      this.areaLetter = ''
      this.numOne = ''
      this.numTwo = ''
      this.numThree = ''
      this.numFour = ''
      this.numFive = ''
      this.numSix = ''
      document.getElementById('letter').click('isLin')
    }
  },
  // 键盘最后一行字母点击事件
  btnBottomNumClick (i) {
    this.selected = i
    if (this.key === 2) {
      this.areaLetter = i
      document.getElementById('numOne').click()
    } else if (this.key === 3) {
      this.numOne = i
      document.getElementById('numTwo').click()
    } else if (this.key === 4) {
      this.numTwo = i
      document.getElementById('numThree').click()
    } else if (this.key === 5) {
      this.numThree = i
      document.getElementById('numFour').click()
    } else if (this.key === 6) {
      this.numFour = i
      document.getElementById('numFive').click()
    } else if (this.key === 7) {
      this.numFive = i
      if (this.checkbox) {
        document.getElementById('numSix').click()
      }
    } else if (this.key === 8) {
      this.numSix = i
    }
  },
  // 车牌号第二位输入框选择
  btnClickA () {
    this.isDisable = true
    this.isA = true
    this.isYue = false
    this.isUp = true
    this.isNumOne = false
    this.isNumTwo = false
    this.isNumThree = false
    this.isNumFour = false
    this.isNumFive = false
    this.isNumSix = false
    this.keyboardShow = true
    this.keyboard = 'num'
    this.key = 2
  },
  // 车牌号后五位或六位输入框选择
  btnClickNum (name) {
    if (this.isSelectl) {
      this.isDisable = true
    } else {
      this.isDisable = false
    }
    this.keyboard = 'num'
    this.keyboardShow = true
    this.isYue = false
    this.isA = false
    this.isNumOne = false
    this.isNumTwo = false
    this.isNumThree = false
    this.isNumFour = false
    this.isNumFive = false
    this.isNumSix = false
    this.isUp = true
    if (name === 'one') {
      this.isNumOne = true
      this.key = 3
    } else if (name === 'two') {
      this.isNumTwo = true
      this.key = 4
    } else if (name === 'three') {
      this.isNumThree = true
      this.key = 5
    } else if (name === 'four') {
      this.isNumFour = true
      this.key = 6
    } else if (name === 'five') {
      this.isNumFive = true
      this.key = 7
    } else if (name === 'six') {
      this.isNumSix = true
      this.key = 8
    }
    if (name === 'five' || name === 'six') {
      this.carNumBottom = ['W', 'X', 'Y', 'Z', '港', '澳', '学']
      this.noneBottom = ['']
    } else {
      this.carNumBottom = ['W', 'X', 'Y', 'Z']
      this.noneBottom = ['', '', '', '']
    }
  },
  // 键盘点击‘完成’
  completeClick () {
    this.isYue = false
    this.isA = false
    this.isNumOne = false
    this.isNumTwo = false
    this.isNumThree = false
    this.isNumFour = false
    this.isNumFive = false
    this.isNumSix = false
    this.isUp = false
    this.isDown = true
    this.keyboardShow = false
  },
  // 键盘点击‘删除图标’
  clearClick () {
    if (this.key === 1) {
      this.areaName = ''
    } else if (this.key === 2) {
      document.getElementById('font').click()
      this.areaLetter = ''
    } else if (this.key === 3) {
      document.getElementById('letter').click()
      this.numOne = ''
    } else if (this.key === 4) {
      document.getElementById('numOne').click()
      this.numTwo = ''
    } else if (this.key === 5) {
      document.getElementById('numTwo').click()
      this.numThree = ''
    } else if (this.key === 6) {
      document.getElementById('numThree').click()
      this.numFour = ''
    } else if (this.key === 7) {
      document.getElementById('numFour').click()
      this.numFive = ''
    } else if (this.key === 8) {
      document.getElementById('numFive').click()
      this.numSix = ''
    }
   },
  addCar () {
   var myApp = new Framework7()
    var num
    var str = document.getElementById('picker-str-date').value
    var end = document.getElementById('picker-end-date').value
    var bt = new Date(str.replace(/\-/g, '\/'))
    var et = new Date(end.replace(/\-/g, '\/'))
    if (!this.checkbox) {
      num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive
    } else if (this.checkbox) {
      num = this.areaName + this.areaLetter + this.numOne + this.numTwo + this.numThree + this.numFour + this.numFive + this.numSix
    }
    if (num === '') {
      this.toastMessage('请输入车牌', 1000)
    } else if (!this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '')) {
      this.toastMessage('请输入完整车牌', 1000)
    } else if (this.checkbox && (this.areaName === '' || this.areaLetter === '' || this.numOne === '' || this.numTwo === '' || this.numThree === '' || this.numFour === '' || this.numFive === '' || this.numSix === '')) {
      this.toastMessage('请输入完整车牌', 1000)
    } else if (str !== '' && end !== '' && bt >= et) {
      this.toastMessage('开始时间必须早于结束时间', 1000)
    } else {
      // const data = {
      // vehiclenum: num
      // }
      // this.$http.post(ADD_VEHICLE, data).then(res => {
      // if (res.data.ret === 0) {
      // this.addedCarNum = num
      // this.$router.push({name: 'AddSuccess', params: {addedCarNum: this.addedCarNum}})
      // } else {
      // this.$dialog.toast({mes:res.data.message,timeout:1200})
      // }
      // })
    }
}
} 

 

posted @ 2017-11-24 16:26  世界很大梦想很远  阅读(10174)  评论(15编辑  收藏  举报