实例

---

html：

<div class="bank_list_container keyboardbox" v-if="brandFold">

<div class="text_hxb">本次交易由<span class="HXB">汇小宝</span>提供服务</div>

<div class="numkeyboard">

<div class="num-area">

<div class="row" v-for="(item,index) in numKeybordList" :key="index">

<div :class="['item',ite===0?'z':'']" v-for="(ite,idx) in item"

                    :key="idx" @click="input({num:ite})">{{ite}}</div><span></span>

</div>

</div>

<div class="btn-area">

<div :class="['item','del']"  @click="delNumFun">

<span >删除</span>

</div>

<div class="confirem item" @click="pay">

<div>确认</div>

<div>支付</div>

</div>

</div>

</div>

</div>

---

css:

.keyboardbox {

background-color:#f0f0f0;

position:fixed;

bottom:0px;

left:0px;

right:0px;

z-index:100;

}

.numkeyboard {

height:11rem;

display:flex;

background-color:#ebedf0;

}

.btn-area {

width:5rem;

height:11rem;

display:flex;

flex-direction:column;

margin-right:0.2rem;

}

.num-area {

flex-grow:1;

display:flex;

flex-wrap:wrap;}

.row {

width:98.5%;

height:25%;

display:flex;

}

.item {

flex-grow:1;

height:2.4rem;

display:flex;

justify-content:center;

align-items:center;

background-color:#FFFFFF;

border-right:1px solid #ebedf0;

width:32.5%;

font-size:1rem;

font-weight:600;

border-radius:0.5rem;

margin-left:0.2rem;

}

.confirem {

background-color:#1989fa;

color:#FFFFFF;

height:6.7rem;

border-radius:0.5rem;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

margin-bottom:0.35rem;

width:100%;

}

.del {

background-color:#fff;

color:#000;

height:10%;

border-radius:0.5rem;

margin-bottom:0.32rem;

width:100%;

}

.text_hxb{

background-color:#fff;

text-align:center;

color:Gray;

height:10%;

border-radius:0.5rem;

margin-bottom:0.32rem;

width:100%;

}

.HXB{

color:blue;

margin-left:3px;

margin-right:3px;

}

---

js+vue:

var vue =new Vue({

el:'#app',

data: {

amount:'',//消费金额

        merchantName:"${merchantName}",//商家名

        merchantNo:"${merchantNo}",//商家Id

        payType:type,

sn:"${sn}",

brandFold:true,

numKeybordList: [

[1,2,3],

[4,5,6],

[7,8,9],

['重输',0,'.']

],

position:window.sessionStorage.getItem('position')

},

methods: {

delNumFun() {

if (this.amount.length ==0)return

            this.amount =this.amount.substring(0,this.amount.length -1)

},

input(op) {

console.log(op)

if(op.num=='重输'){

this.amount=''

                return

            }

if (this.amount.length <=6) {

this.amount += op.num

                if (this.amount.length ==6) {

this.$emit('getmoneyNum', {

amount:this.amount

                    })

}

}

},

confirm() {

let exp =/^(([1-9]\d*)|\d)(\.\d{1,2})?$/;

if(!exp.test(this.amount)){

this.isShow =true

                this.TipsText ="支付金额格式不对!"

                return;

}

},

delNumFun() {

if (this.amount.length ==0)return

            this.amount =this.amount.substring(0,this.amount.length -1)

}

}