c-number-pad

1.0.3 • Public • Published

npm下载量:downloads

欢迎使用 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

Package Sidebar

Install

npm i c-number-pad

Weekly Downloads

4

Version

1.0.3

License

none

Unpacked Size

14.2 kB

Total Files

7

Last publish

Collaborators

  • cai1814963581