用vue寫了個移動端車牌輸入鍵盤
阿新 • • 發佈：2018-04-09
mar ace max UNC btn 代碼 this 大神 nsf
話不多說，先看圖
初學vue，斷斷續續花了一天半才寫出來.... 寫樣式真的很麻煩 下面上代碼
html
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)"> </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)"> </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>
script
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>
樣式也是第一次用大神推薦的vw做適配，真的蠻方便（之前一直用flexible.js）但是有個問題：怎麽能設置固定寬度，因為用電腦打開的話整個頁面很大...看起來很誇張,而且因為它是根據視口做的適配吧 max-width也不好用,求各位朋友教教我.
用vue寫了個移動端車牌輸入鍵盤