vue车牌号键盘输入组件

我爱模板网在之前发过过关于车牌号键盘的js插件，但这个是基于jQuery和layer-mobile的，如果用在vue项目中，感觉不太划算，毕竟要引入这么多，还要使用jQuery库。还好，在《简书》找到了一篇基于vue车牌号键盘的文章，感谢晴天丶麻油叶的无私奉献。经过简单改造（如输入第一个中文后，自动切换到英文键盘，将删除键加上等），顺利用上了这个功能：


组件代码（直接新建vue文件，放到项目的components目录）：

<template lang="">
  <div>
    <div class='panel-wrap'  v-if="isShow" data-value="exit"  @click='colse_da'>
      <div class="vehicle-panel" :style="{background:backgroundColor}">
        <div class='topItem'>
          <span class='check'  @click='check'>中/英</span>
          <span class='contentShow'>{{oinp}}</span>
          <span class='exit' @click='vehicleTap("exit")'>取消</span>
        </div>
        <!--省份简写键盘-->
        <div v-if="keyBoardType === 1">
          <div class="vehicle-panel-row">
            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle1" @click='vehicleTap(item)' :key="idx+item">{{item}}</div>
          </div>
          <div class="vehicle-panel-row">
            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle2" @click='vehicleTap(item)'  :key="idx+item">{{item}}</div>
          </div>
          <div class="vehicle-panel-row">
            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle3" @click='vehicleTap(item)'  :key="idx+item">
              {{item}}
            </div>
             <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
            <img src='../assets/delete.svg' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
          </div>
          </div>
         
          <div class="vehicle-panel-row-last">
            <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4" :style="{border:buttonBorder}"
              :key="idx+item">{{item}}</div>
          </div>
        </div>
        <!--英文键盘  -->
        <div v-else>
          <div class="vehicle-panel-row">
            <div    class='vehicle-panel-row-button vehicle-panel-row-button-number' @click='vehicleTap(item)'  v-for="(item,idx) in keyNumber" :style="{border:buttonBorder}"
              :key="item+idx">{{item}}</div>
          </div>
          <div class="vehicle-panel-row">
            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput1" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
          </div>
          <div class="vehicle-panel-row">
            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput2" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
            <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
              <img src='../assets/delete.svg' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
            </div>
          </div>
          <div class="vehicle-panel-row-last">
            <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput3"
              :key="idx+item">{{item}}</div>
            <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-ok' @click='vehicleTap("ok")' >确定</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
/**
 * @params isShow 控制键盘显示隐藏
 * @prarms oinp   在键盘上显示输入的内容
 * @methods delete 删除按钮触发  this.str = this.str.slice(0, this.str.length-1)
 * @methods ok     确认 按钮触发
 * @methods exit   取消按钮触发
 * @methods inputchange 获取输入的内容
 */
export default {
  props:{
    isShow: false,
    oinp: ""
  },
  data() {
    return {
      keyVehicle1: ["陕", "京", "津", "沪", "冀", "豫", "云", "辽"],
      keyVehicle2: ["黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣"],
      keyVehicle3: ["鄂", "桂", "甘", "晋", "蒙", "吉", "闽"],
      keyVehicle4: ["粤", "川", "青", "藏", "琼", "宁", "贵", "渝"],
      keyNumber: "1234567890",
      keyEnInput1: "QWERTYUIOP",
      keyEnInput2: "ASDFGHJKL",
      keyEnInput3: "ZXCVBNM",
      backgroundColor: "#fff",
      keyBoardType: 1,
      buttonBorder: "1px solid #ccc"
    };
  },
  methods: {
    vehicleTap: function(event) {
      console.log(event);
      switch (event) {
        case "delete":
          this.$emit("delete");
          this.$emit("inputchange",event);
          break;
        case "ok":
          this.$emit("ok");
          break;
        case "exit":
          this.$emit("exit");
          break;
        default:
          this.$emit("inputchange", event);
      }
    },
    colse_da() {
      this.$emit("exit2");
    },
    check() {
      if (this.keyBoardType == 1) {
        this.keyBoardType = 2;
      } else if (this.keyBoardType == 2) {
        this.keyBoardType = 1;
      }
    }
  }
};
</script>
<style type="text/css">
  :host {
    width: 100%;
  }
  .panel-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
  }
  .vehicle-panel {
    width: 100%;
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1000;
    background: #fff;
    padding-bottom: 0.68rem;
  }
  .jik {
    width: 0.6rem;
    height: 0.8rem;
  }

  .vehicle-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .vehicle-panel-row-last {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .vehicle-panel-row-button {
    background-color: #fff;
    margin: 0.05rem;
    width: 0.8rem;
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    border-radius: 0.1rem;
  }
  .vehicle-panel-row-button-number {
    background-color: #eee;
  }
  .vehicle-panel-row-button-last {
    width: 0.9rem;
    height: 0.9rem;
    line-height: 0.9rem;
  }
  .vehicle-hover {
    background-color: #ccc;
  }
  .vehicle-panel-row-button-img {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .vehicle-en-button-delete {
    width: 0.55rem;
    height: 0.85rem;
  }
  .vehicle-panel-ok {
    background-color: #6a7cff;
    color: #fff;
    width: 1.5rem;
    height: 0.8rem;
    line-height: 0.8rem;
  }
  .topItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1rem;
    /* background: #f0f0f0; */
  }
  .exit {
    margin-right: 0.3rem;
    color: #6a7cff;
    font-size: 0.28rem;
    display: block;
    line-height: 0.5rem;
  }
  .check {
    margin-left: 0.3rem;
    color: #6a7cff;
    font-size: 0.28rem;
    display: block;
    line-height: 0.5rem;
  }
</style>

使用示例：

<template>
  <div>
        <button @click="keyState = true">键盘</button>
        <keyword :isShow="keyState" @exit="exit" @inputchange="getKey" :oinp="str" @ok="confirm"/>
  </div>
</template>
<script>
  import keyword from '../components/keyword'
  components:{
    keyword
  },
  export default {
    data(){
       return (){
          keyState:false,
          str:""
        }
    },
    methods:{
      exit(){
        this.keyState = false
      },
      getKey(val){
          if (this.str.length >= 8&&val!="delete") {
            return false
          }
          if(val == 'delete'){
            this.str = this.str.slice(0, this.str.length-1)
          }else{
            this.str+=val
          }
      },
      confirm(e){
        this.keyState = false
      },
    }
  }
</script>

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！