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

林译川

2026-11-03 • 👁 0人浏览过

Vue3 Vant密码输入框自定义显示/隐藏密码图标在使用Vue3和Vant框架开发时，您可能会遇到Vant密码输入框自带密码显示/隐藏功能缺失或显示异常的问题。这通常是因为浏览器默认的密码输入框样式与Vant组件样式冲突导致的。解决方法是自定义密码显示/隐藏功能，并隐藏浏览器默认的图标。问题描述：Vant密码输入框在第一次聚焦时显示密码显示/隐藏图标（浏览器默认图标），但失去焦点后再聚焦，图标消失。解决方法：使用CSS隐藏浏览器默认图标，并使用Vant提供的

v-model

和自定义逻辑控制密码的显示/隐藏。 CSS代码 (隐藏浏览器默认图标): Comet AI 浏览器下载 Comet AI 浏览器，体验由 Perplexity AI 驱动的革命性上网方式。内置 AI 助手可实时总结网页、跨标签页对比信息、自动执行任务。告别繁琐操作，让 AI 成为你的浏览副驾，大幅提升研究与工作效率。支持 Windows、macOS、Android 和 iOS。下载

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组件代码 (示例，需根据实际情况调整):

此代码利用Vant的

van-icon

组件创建一个自定义的密码显示/隐藏图标，并通过

v-model

和

showPassword

变量动态控制输入框的

type

属性，实现密码的显示和隐藏。记住将上述CSS代码添加到您的项目样式表中。此方案避免了与浏览器默认样式的冲突，并提供更一致的用户体验。

相关文章