uni-app:自定义键盘

组件说明

自定义键盘
自定义数字键盘，可以传参数：
1.提交键的颜色；2.提交键的文字描述；3.最大值；4.自定义提交事件

效果展示和示例

使用示例

<number-keyboard
        :maxValue="maxValue" :value="amount"
        btnText="确认支付"
        @input="onInput" @submit="confirmPayment"/>

//这部分必须有
onInput(newValue) {
   
    this.amount = newValue;
},
confirmPayment() {
   
    console.log("pay...")
},

代码实现

<template>
    <view class="component-keyboard">
        <view class="left-keyboard">
            <view class="f f-wrap">
                <view :key="index" @click="handleInput('num',(index+1))" class="item item-num" hover-class="hover"
                      hover-stay-time="50"
                      v-for="(item,index) in 9">
                    {
  { index + 1 }}
                </view>
            </view>
            <view class="f">
                <view @click="handleInput('num', '0')" class="item item0" hover-class="hover" hover-stay-time="50">0
                </view>
                <view @click="handleInput('point','.')" class="item" hover-class