提供一个自定义键盘 可以在uniapp中使用 也可以在h5中使用 非常精简可扩展

主要code

<template>  
    <div class="page_comp">  

        <button type="button" @click="openKeyBoard('s10')">唤起键盘，有小数点</button>  
        <button type="button" @click="openKeyBoard('s20')">唤起键盘，无小数点</button>  
        <button type="button" @click="openKeyBoard('s30')">唤起键盘，替换键值</button>  
        <button type="button" @click="openKeyBoard('s40')">唤起键盘，替换确认</button>  
        <button type="button" @click="openKeyBoard('s50')">无确认键</button>  

        <div style="position: fixed;z-index: 1999;font-size: .3rem;color: #000;background-color: #fff;">  
            {{valList.join("")}}  
        </div>  

        <!-- start -->  
        <div class="md-popup bottom" v-show="ShowKeyBoard">  
            <div class="md-popup-mask" v-show="ShowKeyBoard"></div>  
            <!-- <transition name="cus-slide-up"> -->  
            <div class="cus-num-key-slot" @click="cloKeyBoard" v-if="keyS == 's50'">  
                    收起键盘  
            </div>  
            <div class="cus-key-cont" v-show="ShowKeyBoard">  
                <div class="key-num">  
                    <ul class="key-num-list">  
                        <li @click="getKeyValue(item)" v-if="!(keyS == 's20'&&item == '.')" :class="['key-num-item',item === 0 && keyS == 's20'?'large-item':'']" v-for="(item,index) in keyList" :key="index"><span v-if="item == '.' && keyS == 's30'">{{keyReplce}}</span><span v-else>{{item}}</span></li>  
                        <li @click="delKeyValue" v-if="keyS == 's50'" class="key-num-item no-bg delete"><span></span></li>  
                        <li @click="cloKeyBoard" v-if="!(keyS == 's50')" class="key-num-item slidedown"><span></span></li>  
                    </ul>  
                </div>  
                <div class="keyb-ope" v-if="!(keyS == 's50')">  
                    <ul class="keyb-ope-list">  
                        <li class="keyb-ope-item delete" @click="delKeyValue"><span></span></li>  
                        <li class="keyb-ope-item confirm" @click="entKeyValue"><span>{{keyEntText}}</span></li>  
                    </ul>  
                </div>  
            </div>  
            <!-- </transition> -->  
        </div>  
        <!-- end -->  
    </div>  
</template>

<script>  
export default {  
  name: 'keybord',  
  data () {  
    return {  
        keyList: [1,2,3,4,5,6,7,8,9,'.',0],  
        valList: [],  
        temList: [],  
        keyS: 's10',  
        keyReplce: 'x',  
        keyEntText: '确定',  
        ShowKeyBoard: false  
    }  
  },  
  methods: {  
     getKeyValue(item){  
        this.valList.push(item);  
        //console.log(this.valList);  
     },  
     delKeyValue(){  
       let del_in = this.valList.length-1;   
        this.valList.splice(del_in,1);  
        //console.log(this.valList);  
     },  
     cloKeyBoard(){  
        this.ShowKeyBoard = false;  
     },  
     entKeyValue(){  
        this.temList = this.valList;  
        let resNum = this.temList.join("");  
        console.log(resNum);  
     },  
     openKeyBoard(value){  

       if(!value || value == 's10'){  
            this.ShowKeyBoard = true;  
       }  

       if(value == 's20'){  
            this.keyS = value;  
            this.ShowKeyBoard = true;  
       }  

       if(value == 's30'){  
            this.keyS = value;  
            this.ShowKeyBoard = true;  
       }  

       if(value == 's40'){  
            this.keyEntText = '支付';  
            this.ShowKeyBoard = true;  
       }  

       if(value == 's50'){  
            this.keyS = value;  
            this.ShowKeyBoard = true;  
       }  

     }  
  },  
  watch: {  
        ShowKeyBoard: function(){  
            if(this.ShowKeyBoard){  

            }else{  
                this.keyEntText = '确定';  
                this.keyS = 's10';  
            }  
        }  
  },    
  mounted: function(){  

  },  
  created: function(){  

  }    
}  
</script>

<style>  

.md-popup {  
    position: fixed;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
    display: -webkit-box;  
    display: flex;  
    z-index: 1000;  
}  
.md-popup.bottom {  
    flex-direction: column;  
    justify-content: flex-end;  
}  
.md-popup-mask {  
    top: 0;  
    right: 0;  
    bottom: 0;  
    left: 0;  
    position: absolute;  
    pointer-events: auto;  
    background-color: rgba(0,0,0,.6);  
    z-index: 1;  
}  
.cus-key-cont{position:relative;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;display:-webkit-box;display:-webkit-flex;display:flex;width:100%;height:4.28rem;z-index:9}  
.cus-key-cont:after{content:"";position:absolute;z-index:2;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transform:scaleY(.5) translateY(-100%);transform:scaleY(.5) translateY(-100%);top:0;left:0;right:auto;bottom:auto;width:100%;border-top:0.02rem solid #e2e4ea;-webkit-transform-origin:50% 0;transform-origin:50% 0}  
@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cus-key-cont:after{-webkit-transform:scaleY(.33) translateY(-100%);transform:scaleY(.33) translateY(-100%)}  
}.cus-key-cont .key-num,.cus-key-cont .keyb-ope{display:-webkit-box;display:-webkit-flex;display:flex}  
.cus-key-cont .key-num{-webkit-box-flex:3;-webkit-flex:3;flex:3;background:#f9fafb}  
.cus-key-cont .key-num .key-num-list{float:left;width:100%}  
.cus-key-cont .key-num .key-num-list .key-num-item{position:relative;float:left;width:33.3%;height:1.07rem;padding-top:0.05rem;text-align:center;line-height:1.07rem;font-size:0.52rem;font-weight:500;font-family:Microsoft YaHei,微软雅黑,Arial,sans-serif;color:#111a34;-webkit-transition:background .3s;transition:background .3s;background:#fff;box-sizing:border-box;cursor: pointer;}  
.cus-key-cont .key-num .key-num-list .key-num-item:before{content:"";position:absolute;z-index:2;-webkit-transform:scaleX(.5) translateX(100%);transform:scaleX(.5) translateX(100%);top:0;right:0;left:auto;bottom:auto;border-right:0.02rem solid #e2e4ea;height:100%;-webkit-transform-origin:100% 50%;transform-origin:100% 50%}  
@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cus-key-cont .key-num .key-num-list .key-num-item:before{-webkit-transform:scaleX(.33) translateX(100%);transform:scaleX(.33) translateX(100%)}  
}.cus-key-cont .key-num .key-num-list .key-num-item:after{content:"";position:absolute;z-index:2;-webkit-transform-origin:100% 50%;transform-origin:100% 50%;-webkit-transform:scaleY(.5) translateY(-100%);transform:scaleY(.5) translateY(-100%);top:0;left:0;right:auto;bottom:auto;width:100%;border-top:0.02rem solid #e2e4ea;-webkit-transform-origin:50% 0;transform-origin:50% 0}  
@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx){.cus-key-cont .key-num .key-num-list .key-num-item:after{-webkit-transform:scaleY(.33) translateY(-100%);transform:scaleY(.33) translateY(-100%)}  
}.cus-key-cont .key-num .key-num-list .key-num-item.no-bg{background:0 0}  
.cus-key-cont .key-num .key-num-list .key-num-item:nth-of-type(-n+3):after{display:none}  
.cus-key-cont .key-num .key-num-list .key-num-item:nth-of-type(3n){width:33.4%}  
.cus-key-cont .key-num .key-num-list .key-num-item.delete{background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABECAMAAABJe8AqAAAAdVBMVEUAAABBSF5GTWBBSF5CSmJBSF1BSF1hYXVCSV1CSF5SXGtBSV1BSF5DSV9ESl5FTWRBSV5BSF5BSV1BSF5BSV1CSl5BSV5CSV5CSV5DSl9DS2JOTmNBSF1CSV9CSl5ETGBJSWRCSV5CSV1ES19CSF1CSl5BSF2IZB1/AAAAJnRSTlMA1yffH5T1BfudCuvLWUQW8OTUtamjj4FzNy0QwIxNQBxoZkvCZK9RzSgAAAGQSURBVFjDzNW5jsJQDIXhQ8LNwpKwDfswA4Xf/xEpXLhwbo4AWcJVlEj/V6Q4yN9ePr8J8reUWOBcxQKXUmKBrcQCB4kFbqK3xNtXjAHFSvt7xACzjfavdRCw0/66Rwxw1H5zQgzw1yjwQAzwP9d+ixigXmh/MQsCWu3Pp4gBHtpvOsQAp0qBI2KAfq39HWKA+qr9zYs/uB4F/EauikzoJ2HoppNuDPAbecv1RdJQv5Sq44Bt5CHfV8H1xQQH+I3cZvq9fk9DfZFfAthGlhfYDaUSf+kB28jqDDCB9B3gN5ILvG+A30gukL4D3EZSgfQd4DeSC/bIAb+RXGB9A2wj77CjQmt9AmQ2kgrWJ0B+I7mQwIH8RnIh4SuAZ3VmbgMACMNAL0IF7L8iokposaLYEyDx5OyD3CKBQ6avqcBDKx8VMezW57DrH9fAJIHTj0wa+gKxhQxeCtERGN/hVyW+5wJiWqGAHSXQtMZmgpqqhIegpjonE9RVqZVLQWDWac0gqLlavgQ11/u1HxRBUH6BA3XHDDIvn0o0AAAAAElFTkSuQmCC) 50% no-repeat;background-size:0.46rem}  
.cus-key-cont .key-num .key-num-list .key-num-item.slidedown{background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABeAgMAAAC7uhn4AAAACVBMVEUAAAASHDYRGjQxUFCHAAAAAnRSTlMAgJsrThgAAAB/SURBVEjH7dUxDoAgEETRsbGgtvI0XkdP4xEoaOSUJgQzJMMmlpvAtL94YRuQ7flqEf2F2WazWsjtotvm6WbOWvgO5rx5utlsP5uzP84ehtlaX3xDt9R2oLOrpAe97aUlEySnIDkFySlITkFyCpJTkJyCyT4pOQXJ6U7Y29DuBThrzOxbC3kTAAAAAElFTkSuQmCC) 50% no-repeat;background-size:0.54rem}  
.cus-key-cont .key-num .key-num-list .key-num-item.large-item{width:66.6%}  
.cus-key-cont .key-num .key-num-list .key-num-item.active,.cus-key-cont .key-num .key-num-list .key-num-item:active{background-color:#f9fafb}  
.cus-key-cont .key-num .key-num-list .key-num-item:after,.cus-key-cont .key-num .key-num-list .key-num-item:before{pointer-events:none}  
.cus-key-cont .keyb-ope{-webkit-box-flex:1;-webkit-flex:1;flex:1}  
.cus-key-cont .keyb-ope .keyb-ope-list{position:relative;float:left;width:100%;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;flex-direction:column}  
.cus-key-cont .keyb-ope .keyb-ope-list .keyb-ope-item{position:relative;float:left;width:100%;background:#fff;-webkit-transition:background .3s;transition:background .3s;cursor: pointer;}  
.cus-key-cont .keyb-ope .keyb-ope-list .keyb-ope-item.delete{height:1.07rem;background:#fff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABECAMAAABJe8AqAAAAdVBMVEUAAABBSF5GTWBBSF5CSmJBSF1BSF1hYXVCSV1CSF5SXGtBSV1BSF5DSV9ESl5FTWRBSV5BSF5BSV1BSF5BSV1CSl5BSV5CSV5CSV5DSl9DS2JOTmNBSF1CSV9CSl5ETGBJSWRCSV5CSV1ES19CSF1CSl5BSF2IZB1/AAAAJnRSTlMA1yffH5T1BfudCuvLWUQW8OTUtamjj4FzNy0QwIxNQBxoZkvCZK9RzSgAAAGQSURBVFjDzNW5jsJQDIXhQ8LNwpKwDfswA4Xf/xEpXLhwbo4AWcJVlEj/V6Q4yN9ePr8J8reUWOBcxQKXUmKBrcQCB4kFbqK3xNtXjAHFSvt7xACzjfavdRCw0/66Rwxw1H5zQgzw1yjwQAzwP9d+ixigXmh/MQsCWu3Pp4gBHtpvOsQAp0qBI2KAfq39HWKA+qr9zYs/uB4F/EauikzoJ2HoppNuDPAbecv1RdJQv5Sq44Bt5CHfV8H1xQQH+I3cZvq9fk9DfZFfAthGlhfYDaUSf+kB28jqDDCB9B3gN5ILvG+A30gukL4D3EZSgfQd4DeSC/bIAb+RXGB9A2wj77CjQmt9AmQ2kgrWJ0B+I7mQwIH8RnIh4SuAZ3VmbgMACMNAL0IF7L8iokposaLYEyDx5OyD3CKBQ6avqcBDKx8VMezW57DrH9fAJIHTj0wa+gKxhQxeCtERGN/hVyW+5wJiWqGAHSXQtMZmgpqqhIegpjonE9RVqZVLQWDWac0gqLlavgQ11/u1HxRBUH6BA3XHDDIvn0o0AAAAAElFTkSuQmCC) 50% no-repeat;background-size:0.42rem;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1}  
.cus-key-cont .keyb-ope .keyb-ope-list .keyb-ope-item.delete:active{background-color:#f9fafb}  
.cus-key-cont .keyb-ope .keyb-ope-list .keyb-ope-item.confirm{padding-top:0.05rem;color:#fff;font-size:0.36rem;background:#2f86f6;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-flex:1;-webkit-flex:1;flex:1;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;}  
.cus-key-cont .keyb-ope .keyb-ope-list .keyb-ope-item.confirm:active{background-color:#2a78dc}  
.cus-key-cont.simple .key-num-item{color:number-keyb-key-color-simple!important}  
.cus-slide-up-enter,.cus-slide-up-leave-to {  
    -webkit-transform: translate3d(0,100%,0);  
    transform: translate3d(0,100%,0)  
}  
.cus-slide-up-enter-active {  
    -webkit-transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);  
    transition: -webkit-transform .3s cubic-bezier(.165,.84,.44,1);  
    transition: transform .3s cubic-bezier(.165,.84,.44,1);  
    transition: transform .3s cubic-bezier(.165,.84,.44,1), -webkit-transform .3s cubic-bezier(.165,.84,.44,1)  
}  
.cus-slide-up-leave-active {  
    -webkit-transition: -webkit-transform .25s cubic-bezier(.165,.84,.44,1);  
    transition: -webkit-transform .25s cubic-bezier(.165,.84,.44,1);  
    transition: transform .25s cubic-bezier(.165,.84,.44,1);  
    transition: transform .25s cubic-bezier(.165,.84,.44,1), -webkit-transform .25s cubic-bezier(.165,.84,.44,1)  
}  
.cus-num-key-slot{  
    position: relative;  
    width: 100%;  
    height: 40px;  
    line-height: 40px;  
    background-color: #f8f8f8;  
    color: #666;  
    font-size: 14px;  
    z-index: 9;  
    text-align: center;  
}  

</style>