vue +vant 车牌号输入

村里的大鹅

已于 2022-07-15 15:40:30 修改

阅读量1.3k

点赞数

文章标签： vue vue.js 前端

于 2022-07-15 15:35:12 首次发布

本文链接：https://blog.csdn.net/weixin_49302285/article/details/125805815

版权

最近写了一个预进出场的需求

1.HTML

<template>
  <div class="keyboard">
    <div class="numberCover">
      <div class="input-box" @click="clickShowKeyboard">
        <li>{{ first }}</li>
        <li>{{ numArr[0] }}</li>
        <li>{{ numArr[1] }}</li>
        <li>{{ numArr[2] }}</li>
        <li>{{ numArr[3] }}</li>
        <li>{{ numArr[4] }}</li>
        <li>{{ numArr[5] }}</li>
        <li v-show="!newNumberFlag">{{ numArr[6] }}</li>
      </div>
      <div class="button">
        <van-button type="primary" color="#5264E7" class="bottom-button" @click="changeNumber" v-show="!newNumberFlag">
          新能源
        </van-button>
        <van-button type="primary" color="#5264E7" class="bottom-button" @click="changeNumber" v-show="newNumberFlag">
          普
        </van-button>
      </div>
    </div>
    <!-- 选择车牌号 首个汉字键盘 弹出层 -->
    <div class="plate_number">
      <van-popup v-model="show_chinese" position="bottom" :overlay="true" overlay-class="displayNone">
        <div class="plate_chinese_box">
          <!-- 点击对应的汉字，进行输入 -->
          <van-button size="small" v-for="(item, index) in ChineseList" :key="item.id" @click="checkChinese(index)">
            {{ item.name }}</van-button>
          <div class="close-box" @click.stop="close_keyboard">
            <div>╳</div>
            <li></li>
          </div>
        </div>
      </van-popup>
    </div>
    <!-- 英文 数字 键盘 -->
    <div class="allBoard">
      <van-popup v-model="show_allBoard" position="bottom" :overlay="true" overlay-class="displayNone">
        <div class="plate_number_box">
          <!-- 点击对应的字母或数字，进行输入 -->
          <van-button size="small" v-for="(item, index) in English_Number" :key="item.id"
            @click="checkEnglish_num(index)">{{ item.name }}</van-button>
          <div class="close-box" @click.stop="close_keyboard">
            <div>╳</div>
            <li></li>
          </div>
        </div>
      </van-popup>
    </div>
  </div>
</template>
<script src="./index.js">
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import './index.scss';
</style>
<style lang="scss">
.displayNone {
  display: none !important;
}
</style>

2.js

export default {
  data() {
      return {
          showKeyboard: true,    //车牌号输入框是否聚焦
          show_chinese:false,     //是否显示汉字键盘
          show_allBoard:false,     //是否显示英文数字键盘
          ChineseList:[
              {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},
          ],
          English_Number:[
              {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},
              {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},
          ],
          plate_number: '',   //车牌号
          first:'豫',
          numArr:[],
          newNumberFlag:false//false是普通车牌号，true为新能源
      }
  },
  computed: {},
  watch:{
    plate_number(newVal,oldVal){
      console.log(newVal);
    },
    numArr(newVal,oldVal){
      console.log(newVal);

    },
    first(newVal,oldVal){
      console.log(newVal);

    }
  },
  methods: {
      // 唤起键盘
      clickShowKeyboard(){
          if(!this.first){
              this.show_chinese = true;
          }else{
              this.show_chinese = false;
              this.show_allBoard = true;
          }
      },
      // 选择车牌号前面的汉字 
      checkChinese(index){
        // debugger
          // 如果点击删除键，删除第一个格的内容
          if(this.ChineseList[index].id == 99){
              this.first = ''
          }else{
              // 把选中的字赋值给第一个格，并且切换键盘
              this.first = this.ChineseList[index].name;
              this.show_chinese = false;
              this.show_allBoard = true;
          }
      },
      // 选择车牌号后面的数字和字母 
      checkEnglish_num(index){
          // 如果点击删除键，删除 numArr 的最后一个值
          if(this.English_Number[index].id == 99){
              this.numArr.pop()
              // 如果 numArr 里面被删的没有值了，切换键盘
              if(this.numArr.length == 0){
                  this.show_chinese = true;
                  this.show_allBoard = false;
              }
          }else{
              // 把选中的值 push 到 numArr 内
              this.numArr.push(this.English_Number[index].name)
              // 如果 numArr 中的值超过 7 个（车牌号的最大位数），删除最后一个
              if(this.numArr.length > 7){
                  this.numArr.pop()
              }
          }
      },
      changeNumber(){
        //点击新能源
        this.newNumberFlag=!this.newNumberFlag
        if(this.newNumberFlag&&this.numArr.length > 6){
          this.numArr.pop()
      }
      },
      // 关闭虚拟键盘
      close_keyboard(){
          this.show_chinese = false;
          this.show_allBoard = false;
      }
  },
  created () { 
    // alert(1)

  },
}

3.css

.keyboard {
  // width: 100%;
  width: calc(100% - 30px);
  // position: absolute;
  // margin-left: 15px;
  // margin-top: 15px;
  margin: 15px auto;
}

.numberCover {
  display: flex;

  .button {
    margin-left: 10px;
    width: 18%;

    .van-button {
      width: 100%;
      // margin-right: 15px;
      // margin-top: 15px;
      // margin-left: 10px;
      height: 35px;
    }
  }

  .van-button--normal {
    padding: 0;
  }

}

// 车牌号 & 虚拟键盘
.input-box {
  width: 80%;
  height: 35px;
  margin: auto;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 6px 8px 0px rgba(96, 100, 112, 0.1);
  // border-radius: .4rem;
  border: 1px solid rgba(206, 208, 210, 1);
  // margin: 0 auto 2rem;
  display: flex;
  justify-content: center;

  li {
    flex: 1;
    border-right: 1px solid rgba(206, 208, 210, 1);
    box-sizing: border-box;
    margin-left: -1px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #323233;
  }

  li:last-child {
    border: none;
  }




}

.class-close-box {
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0.5rem;
  top: -40px;
}

.class-close-box-div {
  width: 20px;
  height: 20px;
  font-size: 13;
  line-height: 20px;
  margin: auto;
  text-align: center;
  border: 1px solid #666;
  border-radius: 50%;
}

.class-close-box-li {
  width: 1px;
  height: 0.5rem;
  background: #666;
  margin: auto;
}

.overflow-y {
  overflow-y: inherit;
}

.class-van-button-small {
  min-width: 0;
  border-radius: 5px;
  margin: 5px 2px;
  box-shadow: 5px 5px 5px #aaa;
}

.class-plate-box {
  width: 100%;
  padding: 0.7rem 0.5rem;
  box-sizing: border-box;
  background: #eaf1f9;
  position: relative;
}

.plate_number {
  .van-popup {
    @extend .overflow-y;
  }

  .van-popup--bottom {
    background: #eee;
  }

  .plate_chinese_box {
    width: 100%;
    @extend .class-plate-box;

    .close-box {
      @extend .class-close-box;

      div {
        @extend .class-close-box-div;
      }

      li {
        @extend .class-close-box-li;
      }
    }

    .van-button--small {
      width: 11.3%;
      // height: 3.5rem;
      @extend .class-van-button-small;
    }
  }
}

.allBoard {
  .van-popup {
    @extend .overflow-y;
  }

  .plate_number_box {
    width: 100%;
    @extend .class-plate-box;

    .close-box {
      @extend .class-close-box;

      div {
        @extend .class-close-box-div;
      }

      li {
        @extend .class-close-box-li;
      }
    }

    .van-button--small {
      width: 8.8%;
      // height: 3rem;
      @extend .class-van-button-small;
    }

    .van-button--small:nth-child(1) {
      margin-bottom: 5px;
    }

    .van-button--small:nth-child(21) {
      margin-left: 5%;
    }

    .van-button--small:nth-child(30) {
      margin-left: 10%;
    }

    .van-button--small:last-child {
      width: 13%;
    }
  }
}