Vue 3 密码显隐切换需用 ref 控制 type 和图标状态，重置表单时手动同步 isPassword 和 passwordType，切换后主动聚焦并增强无障碍支持。

在 Vue 3 中实现密码显示与隐藏切换，核心是控制 <input> 的 type 属性在 "password" 和 "text" 之间安全、稳定地切换，同时保持焦点、光标位置和表单状态一致。不是简单改个 type 就完事——尤其在配合 el-form、formEl.resetFields() 或 Composition API 使用时，容易出现重置后仍为明文、图标状态不同步、失焦或光标跳动等问题。

用 ref 控制 type + 图标状态（推荐基础方案）

使用响应式变量管理输入框类型和眼睛图标状态，避免依赖 DOM 操作：

• 定义 const isPassword = ref(true) 和 const passwordType = ref('password')（二者语义一致，选其一即可）
• 绑定到 <el-input :type="passwordType"></el-input> 或原生 <input :type="passwordType">
• 点击小眼睛时同步更新：isPassword.value = !isPassword.value; passwordType.value = isPassword.value ? 'password' : 'text';
• 图标用三元表达式切换：:icon-class="isPassword.value ? 'eye' : 'eye-open'"

重置表单时必须重置状态（关键易错点）

调用 formEl.resetFields() 不会自动还原 passwordType 或 isPassword 的值，导致重置后密码仍是明文、图标显示错误：

Element Plus UI Vue3

Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。

下载

• 在重置方法中手动同步状态：isPassword.value = true; passwordType.value = 'password';
• 确保重置逻辑在 resetFields() 之后执行（无需 nextTick，除非你有特殊 focus 需求）
• 示例：

  const resetForm = (formEl) => {<br>  if (!formEl) return;<br>  isPassword.value = true;<br>  passwordType.value = 'password';<br>  formEl.resetFields();<br>};

保持焦点与光标不跳（提升体验）

单纯切 type 可能导致输入框失焦或光标回到开头，尤其在移动端或快速连续点击时：

立即学习“前端免费学习笔记（深入）”；

• 切换后主动聚焦：this.$refs.inputRef?.focus()（Options API）或 inputRef.value?.focus()（Composition API）
• 如需保留光标位置，可在切换前记录 selectionStart/selectionEnd，切完再 restore（较重，一般场景非必需）
• 更稳妥做法：用 v-show 同时渲染两个 input（type="password" 和 type="text"），仅通过 CSS 切换显隐，完全规避 type 切换带来的副作用

无障碍与可访问性建议

小眼睛不只是视觉开关，要让屏幕阅读器和键盘用户也能可靠操作：

• 给眼睛图标添加 role="button" 和 tabindex="0"
• 用 aria-label 明确说明当前状态，例如 aria-label="显示密码" 或 aria-label="隐藏密码"
• 图标颜色变化 + 视觉反馈（如 hover/active 样式）增强可感知性
• 避免仅靠颜色区分状态（如只变色不加图标或文字提示）