用vue写了个移动端车牌输入键盘

 1 <template>
 2     <section class="pkey-contain">
 3         <section class="pkey-win">
 4             <header class="pkey-header">车牌号码</header>
 5             <div class="pkey-win-body">
 6                 <div class="pkey-ipt pkey-foucs">{{plate}}</div>
 7                 <div class="pkey-tips">{{tips}}</div>
 8             </div>
 9         </section>
10         <section class="pkey-keyboard">
11             <header class="pkey-header2">
12                 <label class="pkey-chacelbtn" @click="closewin">取消</label><label class="pkey-okbtn" @click="checkplate">完成</label>
13             </header>
14             <section class="pkey-keyscontain">
15                 <ul>
16                     <li v-show="txtboardshow" v-for="(item,index) in cartxt">
17                         <span v-show="index==cartxt.length-1" @click="txtboardshow=false,numboardshow=true">ABC</span>
18                         <label v-for="(items,indexi) in item" @click="txtclick(items,indexi,item.length)">{{items}}</label>
19                         <span v-show="index==cartxt.length-1" @click="plate=plate.substr(0, plate.length-1)">&nbsp;</span>
20                     </li>
21                     <li v-show="numboardshow" v-for="(item,index) in numtxt">
22                         <span v-show="index==cartxt.length-1" @click="txtboardshow=true,numboardshow=false">字</span>
23                         <label v-for="(items,indexi) in item" @click="numclick(items,indexi,item.length)">{{items}}</label>
24                         <span v-show="index==cartxt.length-1" @click="plate=plate.substr(0, plate.length-1)">&nbsp;</span>
25                     </li>
26                 </ul>
27             </section>
28             <transition name="fade">
29                 <section class="showkey" v-show="keyshow" :keyshow="keyshow" :style="{marginLeft:mleft+‘px‘}">{{keyb}}</section>
30             </transition>
31         </section>
32     </section>
33 </template>

  1 <script>
  2 export default{
  3     data(){
  4         return{
  5             plate:‘‘,
  6             keyb:‘‘,
  7             txtboardshow:true,
  8             numboardshow:false,
  9             keyshow:false,
 10             mleft:0,
 11             tips:‘‘,
 12             cartxt:[
 13                 [‘京‘,‘津‘,‘渝‘,‘沪‘,‘冀‘,‘晋‘,‘辽‘,‘吉‘,‘黑‘,‘苏‘],
 14                 [‘浙‘,‘皖‘,‘闽‘,‘赣‘,‘鲁‘,‘豫‘,‘鄂‘,‘湘‘,‘粤‘,‘琼‘],
 15                 [‘川‘,‘贵‘,‘云‘,‘陕‘,‘甘‘,‘青‘,‘蒙‘,‘桂‘,‘宁‘,‘新‘],
 16                 [‘藏‘,‘使‘,‘领‘,‘警‘,‘学‘,‘港‘,‘澳‘]
 17             ],
 18             numtxt:[
 19                 [‘1‘,‘2‘,‘3‘,‘4‘,‘5‘,‘6‘,‘7‘,‘8‘,‘9‘,‘0‘],
 20                 [‘Q‘,‘W‘,‘E‘,‘R‘,‘T‘,‘Y‘,‘U‘,‘I‘,‘O‘,‘P‘],
 21                 [‘A‘,‘S‘,‘D‘,‘F‘,‘G‘,‘H‘,‘J‘,‘K‘,‘L‘],
 22                 [‘Z‘,‘X‘,‘C‘,‘V‘,‘B‘,‘N‘,‘M‘]
 23             ],
 24         }
 25     },
 26     methods: {
 27         txtclick : function(txt,indexi,size){
 28             if(this.plate.length>10){
 29                 return
 30             }
 31             this.txtboardshow = false;
 32             this.numboardshow = true;
 33             this.plate+=txt;
 34             this.keyb = txt;
 35             this.composition(indexi,size);            
 36         },
 37         numclick : function(num,indexi,size){
 38             if(this.plate.length>10){
 39                 return
 40             }
 41             this.plate+=num;
 42             this.keyb = num;
 43             this.composition(indexi,size);
 44             
 45         },
 46         composition : function(indexi,length){
 47             //闪烁位置设置
 48             let winwidth = document.documentElement.clientWidth;
 49             let keyW = winwidth * 65 / 750;
 50             let kkongW = winwidth * 9 / 750;
 51             let showW = winwidth * 120 / 750;
 52             let size = length;
 53             let isEven = (size%2==0) ? true : false;
 54             if(indexi<size/2){ // 左边
 55                 let mleft = 0;
 56                 if(isEven){ // 偶数
 57                     let n = size/2-(indexi+1) + 0.5;
 58                     mleft = n*(keyW + kkongW) + showW/2;
 59                 }
 60                 else{ // 奇数
 61                     let n = (size/2+0.5)-(indexi+1);
 62                     mleft = n*(keyW + kkongW) + showW/2;
 63                 }                
 64                 mleft = (mleft > winwidth/2) ? winwidth/2 : mleft;
 65                 this.mleft = -mleft;
 66             }else{ // 右边
 67                 let mright = 0;
 68                 if(isEven){
 69                     let n = (indexi+1) - size/2 -0.5;
 70                     mright = n*(keyW + kkongW) - showW/2;
 71                 }else{
 72                     let n = (indexi+1) - (size/2+0.5);
 73                     mright = n*(keyW + kkongW) - showW/2;
 74                 }                
 75                 mright = (mright > (winwidth/2-showW)) ? (winwidth/2-showW) : mright;
 76                 this.mleft = mright;
 77             }
 78             //闪烁
 79             this.keyshow = true;
 80             let self = this;
 81             setTimeout(function(){
 82                 self.keyshow = false;
 83             },2250);
 84             
 85         },
 86         checkplate : function(){
 87             if(this.plate==‘‘){
 88                 this.tips = ‘请输入车牌号码‘
 89                 return;
 90             }            
 91             if(!(/^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[警京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼]{0,1}[A-Z0-9]{4}[A-Z0-9挂学警港澳]{1}[A-Z0-9]{0,1}[A-Z0-9]{0,1}$/.test(this.plate))){
 92                 //不是车牌
 93                 this.tips = ‘车牌号格式不正确‘        
 94                 return;
 95             }
 96             this.tips = ‘‘;            
 97             this.$emit(‘transferplate‘,this.plate);
 98             this.plate = ‘‘;
 99             this.txtboardshow = true;
100             this.numboardshow = false;
101         },
102         closewin : function(){
103             this.tips = ‘‘;    
104             this.$emit(‘transferclose‘,false);
105             this.plate=‘‘;
106             this.txtboardshow = true;
107             this.numboardshow = false;
108         }
109     }
110 }    
111 </script>