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 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐