element的密码框实现睁眼闭眼效果

最新推荐文章于 2024-06-29 10:05:11 发布

coup de foudre

最新推荐文章于 2024-06-29 10:05:11 发布

阅读量6.5k

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/weixin_43930553/article/details/120770533

版权

本文介绍了如何利用状态管理实现传统input框的密码可见/不可见切换，通过CSS和字体图标巧妙地模拟眼睛效果，避免了`show-password`的局限，提升用户体验。同时，分享了如何管理和引入阿里图标库来实现这一视觉变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，效果就是这样：
在这里插入图片描述
如果多处使用会创建很多状态标识出来（我这里用的比较少，偷了个懒），不够优雅，可以考虑二次封装