首先，确保你已经安装了 Vant UI 组件库。你可以通过 npm 或 yarn 安装：
npm install vant
# 或者
yarn add vant
然后，在你的 Vue 项目中，可以这样使用 Vant NumberKeyboard 组件：
<template>
<div>
<van-number-keyboard
v-model="inputValue"
:show="showKeyboard"
@input="onInput"
@delete="onDelete"
@confirm="onConfirm"
/>
</div>
</template>
<script>
export default {
data() {
return {
inputValue: '', // 数字键盘的绑定值
showKeyboard: false, // 控制数字键盘的显示状态
};
},
methods: {
onInput(value) {
// 输入时触发
console.log('输入：', value);
},
onDelete() {
// 删除时触发
console.log('删除');
},
onConfirm(value) {
// 确认时触发
console.log('确认：', value);
this.showKeyboard = false; // 隐藏数字键盘
},
},
};
</script>
<style>
/* 在这里可以添加样式 */
</style>
在这个例子中，我们使用了 <van-number-keyboard> 组件，并通过 v-model 绑定了数字键盘的值。通过设置 show 属性，你可以控制数字键盘的显示状态。通过监听 @input、@delete 和 @confirm 事件，你可以在用户输入、删除或确认时执行相应的逻辑。
请确保在你的项目中正确引入了 Vant UI 组件库，并按照文档中的方式进行配置。这只是一个简单的例子，你可以根据实际需求进一步配置和定制 Vant NumberKeyboard 组件。
转载请注明出处：http://www.zyzy.cn/article/detail/5659/Vant