NumberKeyboard 数字键盘

默认样式

数字键盘提供了 input、delete、close、enter、leave 事件，分别对应输入内容、删除内容、键盘抬起和键盘关闭的动作

  1.     <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="默认键盘"></nut-cell>
  2.     <nut-numberkeyboard
  3.         :visible="visible"
  4.         @input="input"
  5.         @close="close"
  6.         @enter="enter"
  7.         @leave="leave"
  8.     ></nut-numberkeyboard>
  1. export default {
  2.     data() {
  3.         return {
  4.             visible: false,
  5.             val: ''
  6.         };
  7.     },
  8.     methods: {
  9.         showKeyBoard() {
  10.             this.visible = true;
  11.         },
  12.         input(number) {
  13.             this.$toast.text(`输入：${number}`);
  14.         },
  15.         close() {
  16.             this.visible = false;
  17.         },
  18.         enter() {
  19.             console.log('键盘抬起');
  20.         },
  21.         leave() {
  22.             console.log('键盘收起');
  23.         },
  24.     }
  25. }

点击键盘以外的区域时，键盘会默认自动收起。

右侧栏键盘

将 type 属性设置为 rightColumn 来展示键盘的右侧栏，常用于金钱支付的场景

  1.     <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="带右侧栏键盘"></nut-cell>
  2.     <nut-numberkeyboard
  3.         :visible="visible"
  4.         :custom-key="customKey"
  5.         @input="input"
  6.         @close="close"
  7.     ></nut-numberkeyboard>
  1. export default {
  2.     data() {
  3.         return {
  4.             visible: false,
  5.             customKey: ['.']
  6.         };
  7.     },
  8.     methods: {
  9.         showKeyBoard() {
  10.             this.visible = true;
  11.         },
  12.         input(number) {
  13.             this.$toast.text(`输入：${number}`);
  14.         },
  15.         close() {
  16.             this.visible = false;
  17.         }
  18.     }
  19. }

带标题栏键盘

通过 title 属性可以设置键盘标题

  1.     <nut-cell :isLink="true" @click.native="showKeyBoard" :showIcon="true" title="带标题栏键盘"></nut-cell>
  2.     <nut-numberkeyboard 
  3.         title="默认键盘" 
  4.         :visible="visible"
  5.         :custom-key="customKey"
  6.         @input="input"
  7.         @close="close"
  8.     ></nut-numberkeyboard>
  1. export default {
  2.     data() {
  3.         return {
  4.             visible: false,
  5.             customKey: ['.']
  6.         };
  7.     },
  8.     methods: {
  9.         showKeyBoard() {
  10.             this.visible = true;
  11.         },
  12.         input(number) {
  13.             this.$toast.text(`输入：${number}`);
  14.         },
  15.         close() {
  16.             this.visible = false;
  17.         }
  18.     }
  19. }

双向绑定键盘

可以通过 v-model 绑定键盘当前输入值

  1.     <nut-textinput 
  2.         placeholder="请输入内容"
  3.         :has-border="false"
  4.         v-model="value" 
  5.         readonly 
  6.         label="双向绑定：" 
  7.     />
  8.     <nut-numberkeyboard
  9.         :visible="visible"
  10.         v-model="value"
  11.         maxlength="8"
  12.         @close="close"
  13.     ></nut-numberkeyboard>
  1. export default {
  2.     data() {
  3.         return {
  4.             visible: false,
  5.             value: ''
  6.         };
  7.     },
  8.     methods: {
  9.         showKeyBoard() {
  10.             this.visible = true;
  11.         },
  12.         close() {
  13.             this.visible = false;
  14.         }
  15.     }
  16. }

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点击关闭按钮或非键盘区域时触发-
enter键盘弹出时触发-
leave键盘收起时触发-

说明：使用数字键盘组件，请保证 NutUI 的版本在 V2.2.11 及以上

NumberKeyboard 数字键盘 - 图1