element的密码框实现睁眼闭眼效果
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
element的密码框是一个眼睛,切换时图标没任何效果,测试给提了个bug,要改成睁眼闭眼的,我。。。。而且翻了翻源码,input密码框状态改图片似乎不大好实现
参考了下帖子,突然发现我居然陷入了思维定式,完全可以不用show-password,自己处理这个普通的input框
<el-form-item label="确认新密码" label-width="100px" prop="confirm_new_pwd">
<el-input :type="confirmNewSecretFlag == false ? 'password' : 'text'" v-model="editUserInfo.confirm_new_pwd" placeholder="再次输入新密码" autocomplete="off">
<i slot="suffix" :class="confirmNewSecretFlag == false ? 'iconfont icon-biyan' : 'el-icon-view'" @click="changeIconState('confirmNewSecretFlag')"></i>
</el-input>
</el-form-item>
实现思路
一个输入框给一个状态,此处为confirmNewSecretFlag ,切换这个状态实现input框type跟class的变化
class中的类,可以看出来,闭眼的字体图标是在阿里图标中下载的,后面的睁眼是用的element的,在阿里图标中新建项目,将该项目所有图标在阿里图标中管理,下载字体图标文件,可放在assets文件中,在全局引入,也可以不下载直接通过连接引入,阿里图标的帮助中有详细说明,ok,效果就是这样:
如果多处使用会创建很多状态标识出来(我这里用的比较少,偷了个懒),不够优雅,可以考虑二次封装
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45
7 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献2条内容
所有评论(0)