自定义h5 键盘

结果示意图如下

1.父组件 father.vue

<template>
    <div class="content" >
    	<div class="weiXin">
    		<p class="title">宏达超市</p>
    		<div class="inputForm">
    			<p class="formtitle">消费金额 :</p>
    			<div class="importform">
    				<span class="moneyicon">￥</span>
    				<span class="importmoney" >
    					<i id="cursor" v-show="cursor"
    					:style="{
    					transform: 'translateX('+ translate+ 'rem)',
    					'-ms-transform': 'translateX('+ translate+ 'rem)',
    					'-moz-transform': 'translateX('+ translate+ 'rem)',
    					'-webkit-transform': 'translateX('+ translate+ 'rem)',
    					'-o-transform': 'translateX('+ translate+ 'rem)'
    				}"
    					></i><span>{{importMoney}}</span>
    				</span>
    			</div>
    		</div>
    		<div class="moneyinfo">
    			<input type="text" maxlength="20" placeholder="备注(20字以内)" @focus="edit" @blur="unEdit">
    		</div>
                <div class="keyboard">
                <board :inputvalue='importMoney' @keyboardInput='numpass'>
                    <div class="payicon" slot='pay' @click='pay'>
                        <p class="surepay">确认支付</p>
                    </div>
                </board>
            </div>
    	</div>
    </div>
</template>

<script>
    import board from '../../components/keyboard'
	export default {
        name: 'pay',
        components:{
            board
        },
    	beforeDestroy() {
    		$('.importmoney').off("touchstart", this.onblur)
        },
    	data() {
    		return {	
                importMoney: '',
                keyboardshoworhide: true,
                cursor: true,
                move: {
                    x: 0,
                    y: 0,
                    n: 0,
                    l: 0,
                },
                selfKeyboard: ''
    		}
        },
        computed: {
            translate: function() {           
    			//光标
    			this.move.l = this.importMoney.length;
    			this.move.n = this.importMoney.indexOf('.');
                this.move.x = this.move.n* 1.8 + (this.move.l-1-this.move.n)*1.8 + 0.6;
                this.move.y = this.move.l*1.8;
                return this.move.n > -1?this.move.x: this.move.y;
            },
        },
    	mounted() {
    		// 此处是解决一些bug
    		$('.importmoney').on("touchstart", () => {
    		    $('.moneyinfo input').blur();
    		});	
    	},
    	methods: {			
             numpass(data) {
                 this.importMoney = data;
            },
    		//input 获的焦点
    		edit() {
    		    //控制键盘消失
    		},
    		//inout 失去焦点
    		unEdit() {
    		    //控制键盘显示
    		},
      },
	}
</script>

2.子组件 son.vue 键盘组件

<template>
    <div class="boardbody">
        <p class="keyboardtitle">向商户付款</p>
        <div class="boardleft">
            <ul>
                <li v-for="item in boardnumber" class="fl"  @touchstart="importNumber(item,$event)"  @touchend="selfKeyboard = ''" :class="{keyBoardAnimation: item == selfKeyboard}"><span>{{item}}</span></li>
            </ul>
        </div>
        <div class="boardright">
            <div class="del" @touchstart='delNumber' :class="{keyBoardAnimation: 'EDL' == selfKeyboard}" @touchend="selfKeyboard = ''">
                <i></i>
            </div>
            <slot name='pay'></slot>
            
        </div>
    </div>
</template>

<script>
export default {
    name: 'board',
    data() {
        return{
           shopName: '',
				frontNum: '', //用于判断输入后的值
				boardnumber: ['1','2','3','4','5','6','7','8','9','0','00','.'],
                selfKeyboard: '',
                importMoney: this.inputvalue,
        }
    },
  
    props: ['inputvalue'],
    mounted() {
       //解决数字键盘最下面一排按键点击延迟（延迟原因未知，是个秘密）
        $('.boardleft').on('touchstart' , 'li' ,function(event){
            let evt = window.event||event;
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            evt.preventDefault();
        })
        $('.boardright').on('touchstart' , '.del' ,function(event){
            let evt = window.event||event;
            window.event? window.event.cancelBubble = true : e.stopPropagation();
            evt.preventDefault();
        });		
    },
    methods: {
        //键盘数字输入
        importNumber(item, event) {
            this.selfKeyboard = item
            let regexp = /^[0-9]+.?[0-9]{0,2}$/ //判断是数字(不包括 1.|| 01 || 01. || .1 || ..)
            if(regexp.test(this.importMoney)) {
                this.frontNum = this.importMoney
                this.importMoney = (this.importMoney + item)
                if(this.frontNum == '0' && item != '.') {
                    this.importMoney = this.frontNum
                }else if(!regexp.test(this.importMoney)) {
                    this.importMoney = this.frontNum
                }
            }else if(!this.importMoney) {
                this.importMoney = (this.importMoney + item)
                if(item === '00' || item === '.') {
                    this.importMoney = ''
                }
            }
            //限制输入金额 1w
            if(parseFloat(this.importMoney) > 10000) {
                this.importMoney = this.frontNum
            };
            this.$emit('keyboardInput', this.importMoney)				
        },
        //键盘删除键 删除 键盘背景
        delNumber() {
            this.selfKeyboard = 'EDL'
            this.importMoney = this.importMoney + ''
            this.importMoney = (this.importMoney).substring(0, this.importMoney.length-1);
            this.$emit('keyboardInput', this.importMoney)
        }   
    }
}
</script>

<style scoped>
	.keyBoardAnimation{
		background-color: #ccc;
	}
	.payingcolor{
		background-color: #4CC94C !important;
	}
	.payedcolor{
		background-color: #1BAE17 !important;
	}
	.keyboardtitle{
		height:2.8rem;
		line-height:2.8rem;
		text-align: center;
	}
     .boardbody{
		height: 100%;
	}
	.keyboard .boardleft{
		width:75%;
		float: left;
	}
	.keyboard .boardright{
        width:25%;
        height: 100%;
        float: right;
        text-align: center;
	}
	.keyboard .boardright .del{
		width:100%;
		height:3.5rem;
		text-align: center;
		border-top:1px solid #E6E6E6;
		border-bottom:1px solid #E6E6E6;
	}
	.keyboard .boardleft ul{
		height: 14rem;
		padding:0;
		margin:0;
	}
	.keyboard .boardleft li{
		width:33.33%;
		height:3.5rem;
		text-align: center;
		line-height:3.5rem;
		font-family:Helvetica;
		color: #333;
		font-size:1.45Rem;
		list-style: none;
		float: left;
		border-top:1px solid #E6E6E6;
		border-right:1px solid #E6E6E6;
	}
</style>

4.其实这个还是很简单的,为什么要写这个呢，主要是熟练一下vue吧.,下面附上媒体查询，这个主要是控制输入金额框的光标移动。

/*媒体查询 兼容不同分辨率*/
@media screen and (max-width: 320px) {
	html{font-size: 16.68px;}
	/*16*/
}
@media screen and (min-width: 321px) and (max-width: 376px) {
	html{font-size: 19.19px;}
	/*20*/
}
@media screen and (min-width: 377px) and (max-width: 413px) {
	html{font-size: 21.5px;}
}
@media screen and (min-width: 414px) and (max-width: 639px) {
	html{font-size: 22px;}
}
@media screen and (min-width: 640px) {
	html{font-size: 30px;}
}