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