vant button,vant input,vue数字软键盘,van-field 输入数字
Vant3 NumberKeyboard 数字键盘是一款基于 Vue.js 框架的数字输入组件，可以用于移动端和 PC 端的 Web 应用程序中。它提供了一个方便的界面，使用户可以在输入数字时更加轻松。

该组件支持自定义外观和功能，包括可配置的输入框样式、按键布局、键盘类型、最大值和最小值等。除了常见的数字键盘外，Vant3 NumberKeyboard 还支持添加自定义键位，例如删除、确认等。

以下是 Vant3 NumberKeyboard 组件的示例代码：

html
<template>
<div>
<van-field
v-model="value"
label="数字键盘"
readonly
clickable
@click="show = true"
/>
<van-number-keyboard
:show="show"
:value="value"
theme="custom"
extra-key="."
@input="onInput"
@delete="onDelete"
@blur="show = false"
/>
</div>
</template>

<script>
export default {
data() {
return {
show: false,
value: '',
};
},
methods: {
onInput(value) {
this.value = value;
},
onDelete() {
this.value = this.value.slice(0, -1);
},
},
};
</script>


在上面的示例中，我们首先使用 van-field 组件创建一个只读的输入框，然后在点击该输入框时显示 van-number-keyboard 组件。value 属性用于绑定输入框中的值，可以在 onInput 方法中更新。同时，在 onDelete 方法中，我们将最后一个字符从 value 中删除以实现删除键的功能。