在使用vant框架的密码输入框时，眼睛图标为什么会消失？如何解决？-js教程-PHP中文网

在使用vant框架的密码输入框时，眼睛图标为什么会消失？如何解决？

碧海醫心

发布： 2025-03-23 09:46:01

原创

711人浏览过

在使用vant框架的密码输入框时，眼睛图标为什么会消失？如何解决？

Vue3 Vant密码输入框自定义显示/隐藏密码图标

在使用Vue3和Vant框架开发时，您可能会遇到Vant密码输入框自带密码显示/隐藏功能缺失或显示异常的问题。这通常是因为浏览器默认的密码输入框样式与Vant组件样式冲突导致的。解决方法是自定义密码显示/隐藏功能，并隐藏浏览器默认的图标。

问题描述：Vant密码输入框在第一次聚焦时显示密码显示/隐藏图标（浏览器默认图标），但失去焦点后再聚焦，图标消失。

解决方法：使用CSS隐藏浏览器默认图标，并使用Vant提供的v-model和自定义逻辑控制密码的显示/隐藏。

CSS代码 (隐藏浏览器默认图标):

神卷标书

神卷标书，专注于AI智能标书制作、管理与咨询服务，提供高效、专业的招投标解决方案。支持一站式标书生成、模板下载，助力企业轻松投标，提升中标率。

查看详情

input[type="password"]::-webkit-toggle-password { /*chrome*/
  -webkit-appearance: none!important;
  display: none!important;
}
input[type="password"]::-moz-ui-password { /*firefox*/
  -moz-appearance: none!important;
  display: none!important;
}
input[type="password"]::-ms-reveal { /*edge*/
  display: none!important;
}

登录后复制

Vue组件代码 (示例，需根据实际情况调整):

<template>
  <div>
    <input
      type="password"
      v-model="password"
      :type="showPassword ? 'text' : 'password'"
    />
    <van-icon
      name="eye"
      @click="showPassword = !showPassword"
    />
  </div>
</template>

<script>
import { ref } from 'vue';
import { Icon } from 'vant';

export default {
  components: {
    [Icon.name]: Icon,
  },
  setup() {
    const password = ref('');
    const showPassword = ref(false);
    return { password, showPassword };
  },
};
</script>

登录后复制

此代码利用Vant的van-icon组件创建一个自定义的密码显示/隐藏图标，并通过v-model和showPassword变量动态控制输入框的type属性，实现密码的显示和隐藏。记住将上述CSS代码添加到您的项目样式表中。此方案避免了与浏览器默认样式的冲突，并提供更一致的用户体验。

以上就是在使用vant框架的密码输入框时，眼睛图标为什么会消失？如何解决？的详细内容，更多请关注php中文网其它相关文章！