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

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

📌博主介绍

💒首页:水香木鱼

🛫专栏：后台管理系统

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

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

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

📝文章内容

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密码右侧添加小眼睛切换状态】，希望可以帮到大家，谢谢。
如果你觉得本篇文章有帮助到您，鼓励一下木鱼吧! 点击【关注+点赞+收藏+评论+转发 】支持一下哟
🙏您的支持就是我更新的最大动力。⭐⭐⭐记得一键三连呦!⭕