npm下载量：

欢迎使用 c-number-pad

安装

// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=23049
npm install c-number-pad

使用方法

<template>
    <view class="box">
		当前键盘输入的值：{{ numberVal }}
        <c-number-pad
			v-model="numberVal"
			:show="show"
			@confirm="onConfirm"
		/>
    </view>
</template>

<script>
	// 以下导入方式按照安装方式导入，二选一
    // 插件市场导入方法：无需引入，可直接使用
	import cNumberPad from "c-number-pad/components/c-number-pad/c-number-pad.vue";		// npm导入方法
    export default {
		// npm导入需要添加components，插件市场导入不需要
        components: {
            cNumberPad
        },
        data() {
            return {
				show: true,
				numberVal: ""
            }
        },
		methods: {
			onConfirm(e) {
				console.log("点击键盘确认键");
				console.log("当前键盘输入的值：", e);
				console.log("当前键盘输入的值：", this.numberVal);
			}
		}
    }
</script>

API

Props

|参数|说明|类型|默认值|可选值| |--|--|--|--|--| |v-model|输入的值|String|-|-| |show|是否显示键盘|Boolean|false|true| |safeAreaInsetBottom|是否开启底部安全区适配|Boolean|true|false| |showPoint|是否显示小数点|Boolean|true|false| |decimalPlaces|限制小数位数，-1则无限长度|Number|2|-| |maxlength|输入的长度，0则无限长度|Number|0|-| |zIndex|键盘层级|Number|800|-| |fontSize|整体的字体大小，单位：rpx|String|Number|32|-| |boxBgColor|整个键盘的背景色|String|#f4f4f4|-| |boxStyle|盒子样式|Object|{}|-| |confirmText|确认键文字|String|确认|-| |confirmColor|确认键文字颜色|String|#fff|-| |confirmBg|确认键背景|String|linear-gradient(to bottom, #ff7979, #ff0000)|-| |confirmStyle|确认键样式|Object|{}|-| |keyBg|按键背景色，0-9和小数点的背景色|String|#fff|-| |delBg|删除键的背景色|String|#fff|-| |delColor|删除图标的颜色|String|#000|-| |delSize|删除图标的大小，单位：rpx|String|Number|60|-|

Events

|事件名|说明|回调参数| |--|--|--| |key|按键点击事件|e| |del|删除按钮事件|-| |confirm|右下角确认按钮事件|e|