Vue 2 + Element UI 实现密码显示、隐藏切换功能
一、使用 Element UI 的 show-password 属性1、Element UI 的 <el-input> 组件提供了一个方便的 show-password 属性。启用后，它会自动添加一个切换密码显示、隐藏的按钮。
2、代码
<template>
<el-form-item prop="password">
<el-input
v-model="password"
placeholder="请输入密码"
type="password"
show-password
>
</el-input>
</el-form-item>
</template>
3、长处：实现简单，无需额外代码。缺点：不支持自定义图标。
二、自定义后缀图标实现密码显示/隐藏
1、如果你想要使用本身的图标或实现更多自定义功能，可以通过 插槽（slot） 的方式来自定义后缀图标，并通过绑定事件来切换密码显示状态。
2、代码
<el-input style="width: 315px;" :type="isShowPassword ? 'text' : 'password'" placeholder="请输入密码" v-model="password">
<i slot="suffix" :class="isShowPassword ? 'el-icon-view' : 'el-icon-lock'" @click="isShowPassword = !isShowPassword"></i>
</el-input> 3、实现分析
（1）自定义插槽：使用 slot="suffix" 来自定义输入框的后缀区域。
（2）图标切换逻辑：定义一个布尔值变量 isShowPassword，用于跟踪密码的显示状态。绑定 @click 事件到后缀图标上，点击后切换 isShowPassword 的状态。
（3）输入框类型切换：通过 :type="isShowPassword ? 'text' : 'password'" 动态改变输入框的类型。
4、效果图
https://i-blog.csdnimg.cn/direct/bb19452eba5942f8b3bbed096520c86d.pnghttps://i-blog.csdnimg.cn/direct/d5b6eb81679f4f128619738170f1d48e.png
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]