import{e as s,o as a,G as t}from"./vendor.f7062dc0.js";const n={class:"markdown-body"},l=[t('

NumberKeyboard 数字键盘

介绍

虚拟数字键盘，用于输入支付密码的场景。

安装

import { createApp } from 'vue';\n//vue\nimport { NumberKeyboard } from '@nutui/nutui';\n//taro\nimport { NumberKeyboard } from '@nutui/nutui-taro';\n\nconst app = createApp();\napp.use(NumberKeyboard);\n\n

代码示例

基础用法 默认键盘

 <nut-numberkeyboard v-model:visible="visible" @input="input" @delete="onDelete" @close="close()"> </nut-numberkeyboard>\n

带右侧栏键盘

<nut-numberkeyboard type="rightColumn" v-model:visible="visible" :custom-key="customKey1" @input="input" @close="close()"> </nut-numberkeyboard>\n

随机数键盘

<nut-numberkeyboard type="rightColumn" v-model:visible="visible" randomKeys="true" :custom-key="customKey1" @input="input" @close="close(）"> </nut-numberkeyboard>\n

带标题栏键盘

<nut-numberkeyboard title="默认键盘" v-model:visible="visible" :custom-key="customKey2" @input="input" @close="close()"> </nut-numberkeyboard>\n

双向绑定：

 <nut-numberkeyboard v-model:visible="visible" v-model:value="value" maxlength="6" @close="close()"> </nut-numberkeyboard>\n

Prop

字段说明类型默认值
visible是否显示键盘booleanfalse
title键盘标题string-
type键盘模式stringdefault：默认样式
rightColumn：带右侧栏
custom-key自定义键盘额外的键array
string		数组形式最多支持添加2个,超出默认取前2项
v-model当前输入值string-
maxlength输入值最大长度，结合 v-model 使用number
string		6

Event

字段说明回调参数
input点击按键时触发按键内容
delete点击删除键时触发-
close点击关闭按钮或非键盘区域时触发-
',20)],p={setup:(t,{expose:p})=>(p({frontmatter:{}}),(t,p)=>(a(),s("div",n,l)))};export{p as default};