Vue 2 + Element UI 实现密码显示、隐藏切换功能

一、使用 Element UI 的 show-password 属性

1、Element UI 的  组件提供了一个方便的 show-password 属性。启用后，它会自动添加一个切换密码显示、隐藏的按钮。

2、代码

3、优点：实现简单，无需额外代码。缺点：不支持自定义图标。

二、自定义后缀图标实现密码显示/隐藏

1、如果你想要使用自己的图标或实现更多自定义功能，可以通过 插槽（slot） 的方式来自定义后缀图标，并通过绑定事件来切换密码显示状态。

2、代码

3、实现说明

（1）自定义插槽：使用 slot="suffix" 来自定义输入框的后缀区域。

（2）图标切换逻辑：定义一个布尔值变量 isShowPassword，用于跟踪密码的显示状态。绑定 @click 事件到后缀图标上，点击后切换 isShowPassword 的状态。

（3）输入框类型切换：通过 :type="isShowPassword ? 'text' : 'password'" 动态改变输入框的类型。

4、效果图