首先，确保你已经安装了 Vant4：
npm install vant@next
然后，在你的 Vue 组件中引入 van-password-input：
<template>
<div>
<van-password-input
v-model="password"
info="密码由 6 位数字组成"
length="6"
@focus="onFocus"
@blur="onBlur"
/>
</div>
</template>
<script>
import { ref } from 'vue';
import { PasswordInput } from 'vant';
import 'vant/lib/index.css'; // 引入样式
export default {
components: {
[PasswordInput.name]: PasswordInput,
},
setup() {
const password = ref('');
const onFocus = () => {
// 在这里处理获取焦点事件
console.log('获取焦点');
};
const onBlur = () => {
// 在这里处理失去焦点事件
console.log('失去焦点', password.value);
};
return {
password,
onFocus,
onBlur,
};
},
};
</script>
在上面的例子中，我们使用了 van-password-input 组件，并通过 v-model 指令将密码输入框的值与一个 Vue 变量 password 进行双向绑定。
我们设置了 info 属性来显示密码输入框下方的提示信息，使用 length 属性来指定密码的长度。同时，我们监听了 @focus 和 @blur 事件，可以在这里处理获取焦点和失去焦点的逻辑。
最后，别忘了引入样式文件，这样样式才能正确应用。
转载请注明出处：http://www.pingtaimeng.com/article/detail/5807/Vant