vue车牌号键盘输入组件_vue.js教程,AngularJS教程_我爱模板网 - 提供下载各种免费建站资源，免费网站模板，免费网页特效，让你爱上建站！

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

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

001<template lang="">
002  <div>
003    <div class='panel-wrap'  v-if="isShow" data-value="exit"  @click='colse_da'>
004      <div class="vehicle-panel" :style="{background:backgroundColor}">
005        <div class='topItem'>
006          <span class='check'  @click='check'>中/英</span>
007          <span class='contentShow'>{{oinp}}</span>
008          <span class='exit' @click='vehicleTap("exit")'>取消</span>
009        </div>
010        <!--省份简写键盘-->
011        <div v-if="keyBoardType === 1">
012          <div class="vehicle-panel-row">
013            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle1" @click='vehicleTap(item)' :key="idx+item">{{item}}</div>
014          </div>
015          <div class="vehicle-panel-row">
016            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle2" @click='vehicleTap(item)'  :key="idx+item">{{item}}</div>
017          </div>
018          <div class="vehicle-panel-row">
019            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyVehicle3" @click='vehicleTap(item)'  :key="idx+item">
020              {{item}}
021            </div>
022             <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
023            <img src='../assets/delete.svg' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
024          </div>
025          </div>
026          
027          <div class="vehicle-panel-row-last">
028            <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)'  v-for="(item,idx) in keyVehicle4" :style="{border:buttonBorder}"
029              :key="idx+item">{{item}}</div>
030          </div>
031        </div>
032        <!--英文键盘  -->
033        <div v-else>
034          <div class="vehicle-panel-row">
035            <div    class='vehicle-panel-row-button vehicle-panel-row-button-number' @click='vehicleTap(item)'  v-for="(item,idx) in keyNumber" :style="{border:buttonBorder}"
036              :key="item+idx">{{item}}</div>
037          </div>
038          <div class="vehicle-panel-row">
039            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}" v-for="(item,idx) in keyEnInput1" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
040          </div>
041          <div class="vehicle-panel-row">
042            <div    class='vehicle-panel-row-button' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput2" @click='vehicleTap(item)'   :key="idx+item">{{item}}</div>
043            <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-row-button-img'>
044              <img src='../assets/delete.svg' class='vehicle-en-button-delete' @click='vehicleTap("delete")' mode='aspectFit'>
045            </div>
046          </div>
047          <div class="vehicle-panel-row-last">
048            <div    class='vehicle-panel-row-button vehicle-panel-row-button-last' @click='vehicleTap(item)' :style="{border:buttonBorder}"  v-for="(item,idx) in keyEnInput3"
049              :key="idx+item">{{item}}</div>
050            <div  :style="{border:buttonBorder}"   class='vehicle-panel-row-button vehicle-panel-ok' @click='vehicleTap("ok")' >确定</div>
051          </div>
052        </div>
053      </div>
054    </div>
055  </div>
056</template>
057<script>
058/**
059 * @params isShow 控制键盘显示隐藏
060 * @prarms oinp   在键盘上显示输入的内容
061 * @methods delete 删除按钮触发  this.str = this.str.slice(0, this.str.length-1)
062 * @methods ok     确认 按钮触发
063 * @methods exit   取消按钮触发
064 * @methods inputchange 获取输入的内容
065 */
066export default {
067  props:{
068    isShow: false,
069    oinp: ""
070  },
071  data() {
072    return {
073      keyVehicle1: ["陕", "京", "津", "沪", "冀", "豫", "云", "辽"],
074      keyVehicle2: ["黑", "湘", "皖", "鲁", "新", "苏", "浙", "赣"],
075      keyVehicle3: ["鄂", "桂", "甘", "晋", "蒙", "吉", "闽"],
076      keyVehicle4: ["粤", "川", "青", "藏", "琼", "宁", "贵", "渝"],
077      keyNumber: "1234567890",
078      keyEnInput1: "QWERTYUIOP",
079      keyEnInput2: "ASDFGHJKL",
080      keyEnInput3: "ZXCVBNM",
081      backgroundColor: "#fff",
082      keyBoardType: 1,
083      buttonBorder: "1px solid #ccc"
084    };
085  },
086  methods: {
087    vehicleTap: function(event) {
088      console.log(event);
089      switch (event) {
090        case "delete":
091          this.$emit("delete");
092          this.$emit("inputchange",event);
093          break;
094        case "ok":
095          this.$emit("ok");
096          break;
097        case "exit":
098          this.$emit("exit");
099          break;
100        default:
101          this.$emit("inputchange", event);
102      }
103    },
104    colse_da() {
105      this.$emit("exit2");
106    },
107    check() {
108      if (this.keyBoardType == 1) {
109        this.keyBoardType = 2;
110      } else if (this.keyBoardType == 2) {
111        this.keyBoardType = 1;
112      }
113    }
114  }
115};
116</script>
117<style type="text/css">
118  :host {
119    width: 100%;
120  }
121  .panel-wrap {
122    position: fixed;
123    top: 0;
124    left: 0;
125    right: 0;
126    bottom: 0;
127    background: rgba(0, 0, 0, 0.5);
128    z-index: 999;
129  }
130  .vehicle-panel {
131    width: 100%;
132    position: fixed;
133    bottom: 0;
134    display: flex;
135    flex-direction: column;
136    justify-content: center;
137    z-index: 1000;
138    background: #fff;
139    padding-bottom: 0.68rem;
140  }
141  .jik {
142    width: 0.6rem;
143    height: 0.8rem;
144  }
145 
146  .vehicle-panel-row {
147    display: flex;
148    justify-content: space-between;
149    align-items: center;
150  }
151  .vehicle-panel-row-last {
152    display: flex;
153    justify-content: space-between;
154    align-items: center;
155  }
156  .vehicle-panel-row-button {
157    background-color: #fff;
158    margin: 0.05rem;
159    width: 0.8rem;
160    height: 0.8rem;
161    text-align: center;
162    line-height: 0.8rem;
163    border-radius: 0.1rem;
164  }
165  .vehicle-panel-row-button-number {
166    background-color: #eee;
167  }
168  .vehicle-panel-row-button-last {
169    width: 0.9rem;
170    height: 0.9rem;
171    line-height: 0.9rem;
172  }
173  .vehicle-hover {
174    background-color: #ccc;
175  }
176  .vehicle-panel-row-button-img {
177    display: flex;
178    justify-content: center;
179    align-items: center;
180  }
181  .vehicle-en-button-delete {
182    width: 0.55rem;
183    height: 0.85rem;
184  }
185  .vehicle-panel-ok {
186    background-color: #6a7cff;
187    color: #fff;
188    width: 1.5rem;
189    height: 0.8rem;
190    line-height: 0.8rem;
191  }
192  .topItem {
193    display: flex;
194    justify-content: space-between;
195    align-items: center;
196    height: 1rem;
197    /* background: #f0f0f0; */
198  }
199  .exit {
200    margin-right: 0.3rem;
201    color: #6a7cff;
202    font-size: 0.28rem;
203    display: block;
204    line-height: 0.5rem;
205  }
206  .check {
207    margin-left: 0.3rem;
208    color: #6a7cff;
209    font-size: 0.28rem;
210    display: block;
211    line-height: 0.5rem;
212  }
213</style>

使用示例：

01<template>
02  <div>
03        <button @click="keyState = true">键盘</button>
04        <keyword :isShow="keyState" @exit="exit" @inputchange="getKey" :oinp="str" @ok="confirm"/>
05  </div>
06</template>
07<script>
08  import keyword from '../components/keyword'
09  components:{
10    keyword
11  },
12  export default {
13    data(){
14       return (){
15          keyState:false,
16          str:""
17        }
18    },
19    methods:{
20      exit(){
21        this.keyState = false
22      },
23      getKey(val){
24          if (this.str.length >= 8&&val!="delete") {
25            return false
26          }
27          if(val == 'delete'){
28            this.str = this.str.slice(0, this.str.length-1)
29          }else{
30            this.str+=val
31          }
32      },
33      confirm(e){
34        this.keyState = false
35      },
36    }
37  }
38</script>

vue车牌号键盘输入组件

猜你喜欢