May 07, 2021 Vant
The numeric keypad, available in two styles, can be used with a password input box or a custom input box component
import Vue from 'vue';
import { NumberKeyboard } from 'vant';
Vue.use(NumberKeyboard);
<van-button @touchstart.stop="show = true">
弹出默认键盘
</van-button>
<van-number-keyboard
:show="show"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
import { Toast } from 'vant';
export default {
data() {
return {
show: true
}
},
methods: {
onInput(value) {
Toast(value);
},
onDelete() {
Toast('删除');
}
}
}
<van-number-keyboard
:show="show"
theme="custom"
extra-key="."
close-button-text="完成"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
The current input value of the keyboard can be bound by v-model
<van-field
readonly
clickable
:value="value"
@touchstart.native.stop="show = true"
/>
<van-number-keyboard
v-model="value"
:show="show"
:maxlength="6"
@blur="show = false"
/>
export default {
data() {
return {
show: false,
value: ''
}
}
}
The event-key property allows you to set the contents of the button in the lower left corner
<van-button plain type="primary" @touchstart.stop="show = true'">
弹出身份证号码键盘
</van-button>
<van-number-keyboard
:show="show"
close-button-text="完成"
extra-key="X"
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
The title of the keyboard can be set with the title of the title
<van-button plain type="info" @touchstart.stop="show = true'">
弹出自定义标题键盘
</van-button>
<van-number-keyboard
:show="show"
close-button-text="完成"
title="键盘标题"
extra-key="."
@blur="show = false"
@input="onInput"
@delete="onDelete"
/>
Parameters | Description | Type | The default |
---|---|---|---|
v-model
v2.0.2
|
The current input value | string | - |
show | Whether to display the keyboard | boolean | - |
theme |
Style style, with an optional value
default
custom
|
string |
default
|
title | The keyboard title | string | - |
maxlength
v2.0.2
|
Enter the maximum length of the value | number | string | - |
transition | Whether to turn on the over-the-field animation | boolean |
true
|
z-index | Keyboard z-index | number | string |
100
|
extra-key | The contents of the button in the lower left corner | string |
''
|
close-button-text | Turn off the button text and don't show it empty | string |
-
|
delete-button-text | Delete the button text | string |
删除
|
show-delete-key | Whether to display the delete button | boolean |
true
|
hide-on-click-outside | Whether to put the keyboard away when you click outside | boolean |
true
|
safe-area-inset-bottom | Whether to turn on the bottom safety zone to fit | boolean |
true
|
The name of the event | Description | Callback parameters |
---|---|---|
input | Triggered when a key is clicked | Key: Key content |
delete | Triggered when the delete key is clicked | - |
close | Triggered when the close button is clicked | - |
blur | Triggered when you click the close button or a non-keyboard area | - |
show | Triggered when the keyboard is fully ejected | - |
hide | Triggered when the keyboard is fully closed | - |
Name | Description |
---|---|
delete | Custom delete key content |
extra-key | Customize the contents of the buttons in the lower left corner |
title-left | Customize what's on the left side of the title bar |