前端element组件库中el-input密码右侧添加小眼睛切换状态

Posted 2022-06-09 水香木鱼

剑阁峥嵘而崔嵬,一夫当关,万夫莫开 –‰

---

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇”

🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。

🔋 小目标: 成为 会设计 、会开发的 “万能钥匙”

📝文章内容

el-input 右侧添加小眼睛，显示密码与隐藏状态

✍ 一、el-input

👇本次演示使用的是阿里图标库自定义图标，详细如何引入阿里图标库，请参考下方文章

前端引入阿里图标库的最快捷方式

核心代码解析：

• :type="flagType" 为动态绑定data中的flagType:'password',
• :class="[this.flag?'iconfont icon-zhengyan':'iconfont icon-biyan']" 为动态样式 ，默认显示闭眼状态
• getFlag()函数，切换小眼睛图标

      <!-- 密码 -->
          <el-form-item label="密码" prop="password">
            <el-input placeholder="请输入密码"
                      :type="flagType"
                      v-model="ruleForm.password">
                      autocomplete="off"
              <i slot="suffix"
                 :class="[this.flag?'iconfont icon-zhengyan':'iconfont icon-biyan']"
                 style="margin-top:8px;font-size:18px;"
                 @click="getFlag()" />
            </el-input>
          </el-form-item>

✍ 二、写入状态【script】

data()
	return
		//密码小眼睛切换状态
       flag: false,
       flagType:'password',
	

 methods:
    //小眼睛切换状态
     getFlag()
       this.flag = !this.flag
       this.flagType = this.flag ? 'text' : 'password'//text为显示密码；password为隐藏密码
     ,
 

📢博主致谢

非常感谢小伙伴们阅读到结尾，本期的文章就分享到这里，总结了【前端element组件库中el-input密码右侧添加小眼睛切换状态】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕

---

💡往期精彩

🈯前端快速排序算法【JavaScript 与vue通用】

🈯前端冒泡排序算法【javascript与vue通用】

🈯vue快速实现锚点功能【简单版与高级版】

🈯前端vue实现高级检索小案例

🈯UI设计指南之可视化大屏【快速理解版】