【vant3】在 vue3 中实现密码框的显示隐藏

html 部分

<van-field
  v-model="loginPassword"
  :type="switchPassType ? 'text' : 'password'"
  name="loginPassword"
  :right-icon="switchPassType ? 'eye' : 'closed-eye'"
  placeholder="登录密码"
  :rules="[{ required: true, message: '请填写登录密码' }]"
  @click-right-icon="switchPassType = !switchPassType"
/>

js 部分

import { Field } from "vant";
import { ref } from "vue";
export default {
  name: "login",
  components: {
    [Field.name]: Field,
  },
  setup() {
    const loginPassword = ref('');
    const switchPassType = ref(false);
    return {
      loginPassword,
      switchPassType,
    };
  },
};