前端element组件库中el |
您所在的位置：网站首页 › 怎么在button中加上小图标 › 前端element组件库中el |
前端element组件库中el
|
💒首页:水香木鱼 🛫专栏：后台管理系统 ✍简介: 博主姓：陈，名：春波。花名 “水香木鱼”，星座附属 “水瓶座一枚” 来自于富土肥沃的"黑龙江省"-美丽的 “庆安小镇” 🔰 格言: 生活是一面镜子。 你对它笑， 它就对你笑； 你对它哭， 它也对你哭。 🔋 小目标: 成为 会设计 、会开发的 “万能钥匙” 📝文章内容el-input 右侧添加小眼睛，显示密码与隐藏状态
👇本次演示使用的是阿里图标库自定义图标，详细如何引入阿里图标库，请参考下方文章 前端引入阿里图标库的最快捷方式 核心代码解析： :type="flagType" 为动态绑定data中的flagType:'password',:class="[this.flag?'iconfont icon-zhengyan':'iconfont icon-biyan']" 为动态样式 ，默认显示闭眼状态getFlag()函数，切换小眼睛图标 autocomplete="off" ✍ 二、写入状态【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设计指南之可视化大屏【快速理解版】 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |