Vant NumberKeyboard 数字键盘运用

发布时间：2023-04-20 11:31:27 所属栏目：教程来源：

导读：数字键盘，提供两种样式风格，可以与密码输入框或自定义的输入框组件配合使用

引入
import Vue from 'vue';
import { NumberKeyboard } from 'vant';

Vue.use(NumberKeyboard);
默认样式

数字键盘，提供两种样式风格，可以与密码输入框或自定义的输入框组件配合使用

引入
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"
/>
双向绑定
可以通过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: ''
}
}
}
左下角按键内容
通过extra-key属性可以设置左下角按键内容

<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"
/>
键盘标题
通过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"
/>

（编辑：汽车网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!