首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-number-keyboard：
<template>
<div>
<van-number-keyboard
:show="showKeyboard"
v-model="inputValue"
@blur="onBlur"
/>
<van-field
v-model="inputValue"
label="金额"
placeholder="请输入金额"
readonly
@click="showNumberKeyboard"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { NumberKeyboard, Field } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[NumberKeyboard.name]: NumberKeyboard,
[Field.name]: Field,
},
setup() {
const showKeyboard = ref(false);
const inputValue = ref('');
const showNumberKeyboard = () => {
showKeyboard.value = true;
};
const onBlur = () => {
// 在这里处理失去焦点事件
console.log('失去焦点', inputValue.value);
};
return {
showKeyboard,
inputValue,
showNumberKeyboard,
onBlur,
};
},
};
</script>
在上面的例子中，我们使用了 van-number-keyboard 组件作为数字键盘的容器，并通过 :show 属性控制数字键盘的显示与隐藏。通过 v-model 指令将数字键盘输入的值与一个 Vue 变量 inputValue 进行双向绑定。
同时，我们使用了 van-field 组件作为输入框，通过设置 readonly 属性禁止直接输入，而是通过点击输入框触发数字键盘的显示。在失去焦点事件 @blur 中，可以处理输入框失去焦点的逻辑。
最后，别忘了引入样式文件，这样样式才能正确应用。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5806/Vant