77 lines
2.3 KiB
Markdown
77 lines
2.3 KiB
Markdown
npm下载量：
|
||
# 欢迎使用 c-number-pad
|
||
|
||
## 安装
|
||
```javascript
|
||
// npm安装方式，插件市场导入无需执行此命令。插件市场导入地址：https://ext.dcloud.net.cn/plugin?id=23049
|
||
npm install c-number-pad
|
||
```
|
||
|
||
## 使用方法
|
||
```javascript
|
||
<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| |