antdv vue3 防止input 自动填充 password

最新推荐文章于 2024-10-30 14:15:00 发布

lbchenxy

最新推荐文章于 2024-10-30 14:15:00 发布

阅读量1.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/lbchenxy/article/details/129841772

该段代码展示了在Vue中使用AntDesignVue库创建一个密码输入框，输入框内包含一个图标，用户可以点击图标切换显示或隐藏密码。`inputType`变量用于控制输入框是文本还是密码类型，并通过`changeInputType`函数实现切换功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 <a-form-item label="密码" name="project_name">
        <!-- <a-input v-model:value="editBareMetalForm.password" type="password" autocomplete="new-password" /> -->
        <a-input
          v-model:value="editBareMetalForm.password"
          :type="inputType"
          placeholder="请输入密码"
          :max-length="64"
          autocomplete="new-password"
        >
          <template #suffix>
            <EyeOutlined v-if="inputType=='text'" class="cursor" @click="changeInputType" />
            <EyeInvisibleOutlined v-if="inputType == 'password'" class="cursor" @click="changeInputType" />
          </template>
        </a-input>
      </a-form-item>
      <script>
import { defineComponent, reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons-vue';
export default defineComponent({
  components: {
    EyeInvisibleOutlined,
    EyeOutlined
  },
  setup(props, { emit }) {
    const inputType = ref('password');
    function changeInputType() {
      if (inputType.value == 'password') {
        inputType.value = 'text';
      } else {
        inputType.value = 'password';
      }
    }
    return {
      inputType,
      changeInputType
    };
  }
});
</script>