# NumberKeyboard 数字键盘

虚拟数字键盘面板，用于数字/身份证号输入使用

# 基本使用

<pi-navbar title="numberkeyboard 数字键盘" />
<pi-form ref="form" :model="form" title="表单校验" border error-type="toast">
  <!--
      <pi-form-item>
        <pi-input />
      </pi-form-item>
  -->
</pi-form>
<pi-number-keyboard
  v-model="form[keyboardOptions.key]"
  :show="keyboardOptions.show"
  :default-value="keyboardOptions.defaultValue"
  :show-title="keyboardOptions.showTitle"
  :title="keyboardOptions.title"
  :extra-key="keyboardOptions.extraKey"
  :key-background-color="keyboardOptions.keyBackgroundColor"
  border-radius="24rpx 24rpx 0 0"
  append-to-body
  @close="keyboardOptions.show = false"
/>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

export default {
  data() {
    return {
      title: '',
      form: {
        code: 30,
        demo2: 100,
        demo3: 44,
        demo4: 555
      },
      keyboardOptions: {
        key: 'code',
        show: false,
        showTitle: true,
        extraKey: '',
        keyBackgroundColor: ''
      }
    }
  },
  methods: {
    handleInputFocus(prop) {
      const keyboardPropMap = {
        code: { showTitle: true, extraKey: '', keyBackgroundColor: '' },
        demo2: { showTitle: false, extraKey: '', keyBackgroundColor: '' },
        demo3: { showTitle: false, extraKey: 'X', keyBackgroundColor: '' },
        demo4: { showTitle: true, extraKey: '.', keyBackgroundColor: '#4b5cc4' }
      }
      this.keyboardOptions = {
        ...this.keyboardOptions,
        ...keyboardPropMap[prop],
        key: prop,
        show: true
      }
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

# 默认数字键盘

<pi-form-item prop="baseUsed" label="默认数字键盘" @click="form.baseUsed.show = true">
  <pi-input v-model="form.baseUsed.value" />
</pi-form-item>
<pi-number-keyboard
  v-model="form.baseUsed.value"
  :show="form.baseUsed.show"
  @close="form.baseUsed.show = false"
/>

1
2
3
4
5
6
7
8

# 数字键盘没有标题

通过 show-title 属性可以设置键盘标题是否显示（默认显示）

<pi-form-item prop="demo2" label="数字键盘没有标题">
  <pi-input v-model="form.demo2" @focus="handleInputFocus('demo2')" />
</pi-form-item>
<pi-number-keyboard
  v-model="form[keyboardOptions.key]"
  :show="true"
  :show-title="false"
  @close="keyboardOptions.show = false"
/>

1
2
3
4
5
6
7
8
9

# 身份证号键盘

通过 extra-key 属性可以设置键盘左下角额外的键

<pi-form-item prop="demo3" label="身份证号键盘">
  <pi-input v-model="form.demo3" @focus="handleInputFocus('demo3')" />
</pi-form-item>
<pi-number-keyboard
  v-model="form[keyboardOptions.key]"
  :show="true"
  :extra-key="X"
  @close="keyboardOptions.show = false"
/>

1
2
3
4
5
6
7
8
9

# 自定义键盘颜色

通过 key-background-color 属性可以实现定义键盘颜色效果

<pi-form-item prop="demo4" label="自定义键盘颜色">
  <pi-input v-model="form.demo4" @focus="handleInputFocus('demo4')" />
</pi-form-item>
<pi-number-keyboard
  v-model="form[keyboardOptions.key]"
  :show="true"
  :show-title="true"
  :key-background-color="#4b5cc4"
  :extra-key="."
  @close="keyboardOptions.show = false"
/>

1
2
3
4
5
6
7
8
9
10
11

# Props

名称	描述	类型	必选	默认值
value	初始值	—	`false`	-
customStyle	自定义样式，对象形式（默认值：{}）	`Object`	`false`	-
customClass	自定义样式类，字符串形式（''）	`String`	`false`	-
show	是否显示键盘	`Boolean`	`false`	false
extraKey	左下角额外的键	`String`	`false`	-
backgroundColor	键盘背景颜色	`String`	`false`	'#ffffff'
keyBackgroundColor	按键背景颜色	`String`	`false`	'#f5f5f5'
keyStyle	按键样式（默认：'{}'）	`Object`	`false`	-
popupSelect	弹窗的配置	`Object`	`false`	popupSelect配置项
popup	弹窗的配置	`Object`	`false`	popup配置项

# PopupSelect Props

提示

以下属性覆盖pi-popup-select配置，其余属性参考popupSelect配置项

名称	描述	类型	必选	默认值
title	标题文案	`String`	`false`	'数字键盘'
height	弹出选择层的高度，不可填百分比	`String`	`false`	'auto'
toolbarPosition	工具条位置	'bottom', 'top', 'none'	`false`	'none'

# Events

事件名	描述	参数
close	点击关闭按钮时触发	-
confirm	点击确认的时候关闭弹窗	-

# Slots

名称	描述	插槽内容
title	定制数字键盘标题	title
header	顶部区域	-
footer	底部区域	-

# Methods

Method	Description	Parameters
handleConfirm	确认选择	-

← Calendar 日历 Dropdown 下拉菜单 →