用vue寫了個移動端車牌輸入鍵盤

話不多說，先看圖

 

初學vue，斷斷續續花了一天半才寫出來.... 寫樣式真的很麻煩 下面上代碼

html

<template>
    <section class="pkey-contain">
        <section class="pkey-win">
            <header class="pkey-header">車牌號碼</header>
            <div class="pkey-win-body">
                <div class="pkey-ipt pkey-foucs">{{plate}}</div>
                <div class="pkey-tips">{{tips}}</div>
            </div>
        </section>
        <section class="pkey-keyboard">
            <header class="pkey-header2">
                <label class="pkey-chacelbtn" @click="closewin">取消</label><label class="pkey-okbtn" @click="checkplate">完成</label>
            </header>
            <section class="pkey-keyscontain">
                <ul>
                    <li v-show="txtboardshow" v-for="(item,index) in cartxt">
                        <span v-show="index==cartxt.length-1" @click="txtboardshow=false,numboardshow=true">ABC</span>
                        <label v-for="(items,indexi) in item" @click="txtclick(items,indexi,item.length)">{{items}}</label>
                        <span v-show="index==cartxt.length-1" @click="plate=plate.substr(0, plate.length-1)">&nbsp;</span>
                    </li>
                    <li v-show="numboardshow" v-for="(item,index) in numtxt">
                        <span v-show="index==cartxt.length-1" @click="txtboardshow=true,numboardshow=false">字</span>
                        <label v-for="(items,indexi) in item" @click="numclick(items,indexi,item.length)">{{items}}</label>
                        <span v-show="index==cartxt.length-1" @click="plate=plate.substr(0, plate.length-1)">&nbsp;</span>
                    </li>
                </ul>
            </section>
            <transition name="fade">
                <section class="showkey" v-show="keyshow" :keyshow="keyshow" :style="{marginLeft:mleft+'px'}">{{keyb}}</section>
            </transition>
        </section>
    </section>
</template>

script

<script>
export default{
    data(){
        return{
            plate:'',
            keyb:'',
            txtboardshow:true,
            numboardshow:false,
            keyshow:false,
            mleft:0,
            tips:'',
            cartxt:[
                ['京','津','渝','滬','冀','晉','遼','吉','黑','蘇'],
                ['浙','皖','閩','贛','魯','豫','鄂','湘','粵','瓊'],
                ['川','貴','雲','陝','甘','青','蒙','桂','寧','新'],
                ['藏','使','領','警','學','港','澳']
            ],
            numtxt:[
                ['1','2','3','4','5','6','7','8','9','0'],
                ['Q','W','E','R','T','Y','U','I','O','P'],
                ['A','S','D','F','G','H','J','K','L'],
                ['Z','X','C','V','B','N','M']
            ],
        }
    },
    methods: {
        txtclick : function(txt,indexi,size){
            if(this.plate.length>10){
                return
            }
            this.txtboardshow = false;
            this.numboardshow = true;
            this.plate+=txt;
            this.keyb = txt;
            this.composition(indexi,size);            
        },
        numclick : function(num,indexi,size){
            if(this.plate.length>10){
                return
            }
            this.plate+=num;
            this.keyb = num;
            this.composition(indexi,size);
            
        },
        composition : function(indexi,length){
            //閃爍位置設置
            let winwidth = document.documentElement.clientWidth;
            let keyW = winwidth * 65 / 750;
            let kkongW = winwidth * 9 / 750;
            let showW = winwidth * 120 / 750;
            let size = length;
            let isEven = (size%2==0) ? true : false;
            if(indexi<size/2){ // 左邊
                let mleft = 0;
                if(isEven){ // 偶數
                    let n = size/2-(indexi+1) + 0.5;
                    mleft = n*(keyW + kkongW) + showW/2;
                }
                else{ // 奇數
                    let n = (size/2+0.5)-(indexi+1);
                    mleft = n*(keyW + kkongW) + showW/2;
                }                
                mleft = (mleft > winwidth/2) ? winwidth/2 : mleft;
                this.mleft = -mleft;
            }else{ // 右邊
                let mright = 0;
                if(isEven){
                    let n = (indexi+1) - size/2 -0.5;
                    mright = n*(keyW + kkongW) - showW/2;
                }else{
                    let n = (indexi+1) - (size/2+0.5);
                    mright = n*(keyW + kkongW) - showW/2;
                }                
                mright = (mright > (winwidth/2-showW)) ? (winwidth/2-showW) : mright;
                this.mleft = mright;
            }
            //閃爍
            this.keyshow = true;
            let self = this;
            setTimeout(function(){
                self.keyshow = false;
            },250);
            
        },
        checkplate : function(){
            if(this.plate==''){
                this.tips = '請輸入車牌號碼'
                return;
            }            
            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))){
                //不是車牌
                this.tips = '車牌號格式不正確'        
                return;
            }
            this.tips = '';            
            this.$emit('transferplate',this.plate);
            this.plate = '';
            this.txtboardshow = true;
            this.numboardshow = false;
        },
        closewin : function(){
            this.tips = '';    
            this.$emit('transferclose',false);
            this.plate='';
            this.txtboardshow = true;
            this.numboardshow = false;
        }
    }
}    
</script>

 

樣式也是第一次用大神推薦的vw做適配，真的蠻方便（之前一直用flexible.js）但是有個問題：怎么能設置固定寬度，因為用電腦打開的話整個頁面很大...看起來很誇張,而且因為它是根據視口做的適配吧 max-width也不好用,求各位朋友教教我.