vue+elementUi 实现密码显示/隐藏+小图标变化功能


Posted in Javascript onJanuary 18, 2020

vue+elementUi 实现密码显示/隐藏+小图标变化(js一共三行代码,其中一行为了美观)...,先给大家展示下效果图,感觉不错可以参考实现代码。

【效果图】

vue+elementUi 实现密码显示/隐藏+小图标变化功能
vue+elementUi 实现密码显示/隐藏+小图标变化功能
vue+elementUi 实现密码显示/隐藏+小图标变化功能

【html】

// 前后代码【略】
<el-form-item label="密码" prop="pwd">
 <el-input v-model="ruleForm.pwd" :type="pwdType" placeholder="请输入密码" @keyup.enter.native="login">
  <i slot="suffix" class="el-icon-view" @click="showPwd"></i>
 </el-input>
</el-form-item>

【js】

showPwd () {
 this.pwdType === 'password' ? this.pwdType = '' : this.pwdType = 'password';
 let e = document.getElementsByClassName('el-icon-view')[0];
 this.pwdType == '' ? e.setAttribute('style', 'color: #409EFF') : e.setAttribute('style', 'color: #c0c4cc');
},

ps:下面看下vue+element-ui实现显示隐藏密码

<template>
    <el-form :model="cuser_info" label-width="115px" label-position="left" >
     <el-row :gutter="20">
      <el-col :span="24">
       <el-form-item v-if="visible2" label="确认密码" prop="confirm_pwd">
        <el-input type="password" v-model="cuser_info.confirm_pwd" placeholder="请再次输入密码">
         <i slot="suffix" title="显示密码" @click="changePass('show',2)" style="cursor:pointer;"
           class="iconfont icon-xianshizy"></i>
        </el-input>
       </el-form-item>
       <el-form-item v-else label="确认密码" class="is-required" prop="confirm_pwd">
        <el-input type="text" v-model="cuser_info.confirm_pwd" placeholder="请再次输入密码">
         <i slot="suffix" title="隐藏密码" @click="changePass('hide',2)" style="cursor:pointer;"
           class="iconfont icon-yincangby"></i>
        </el-input>
       </el-form-item>
      </el-col>
    </el-form> 
</template>

<script>
 export default {
  name: "AddC_user",
  data(){ 
   return{
    cuser_info:{
     confirm_pwd:'',
    },
    visible2: true, 
   }
  }, 
  methods:{ 
   //控制密码显示隐藏
   changePass(value,kind) {
     this.visible2 = !(value === 'show');
   }, 
  },
 }
</script>

 总结

以上所述是小编给大家介绍的vue+elementUi 实现密码显示/隐藏+小图标变化功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
Apr 25 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
Dec 12 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
小程序登录/注册页面设计的实现代码
May 24 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
JS实现可以用键盘方向键控制的动画
Dec 11 Javascript
JS数组方法slice()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(中级版)
Jan 18 #Javascript
vue.js+ElementUI实现进度条提示密码强度效果
Jan 18 #Javascript
JS数组方法concat()用法实例分析
Jan 18 #Javascript
JS实现纵向轮播图(初级版)
Jan 18 #Javascript
JS数组方法reverse()用法实例分析
Jan 18 #Javascript
JS实现横向轮播图(初级版)
Jun 24 #Javascript
You might like
php adodb连接mssql解决乱码问题
2009/06/12 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
php计划任务之验证是否有多个进程调用同一个job的方法
2015/12/07 PHP
用HTML/JS/PHP方式实现页面延时跳转的简单实例
2016/07/18 PHP
PHP基于PDO实现的SQLite操作类【包含增删改查及事务等操作】
2017/06/21 PHP
PHP hebrev()函数用法讲解
2019/02/21 PHP
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
Jquery 类网页微信二维码图块滚动效果具体实现
2013/10/14 Javascript
jQuery 回调函数(callback)的使用和基础
2015/02/26 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
JS实现处理时间,年月日,星期的公共方法示例
2019/05/31 Javascript
利用js-cookie实现前端设置缓存数据定时失效
2019/06/18 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
2019/08/15 Javascript
js实现倒计时秒杀效果
2020/03/25 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python批量提取word内信息
2015/08/09 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
python中学习K-Means和图片压缩
2017/11/20 Python
python 多线程将大文件分开下载后在合并的实例
2018/11/09 Python
python selenium循环登陆网站的实现
2019/11/04 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
ivx平台开发之不用代码实现一个九宫格抽奖功能
2021/01/27 HTML / CSS
世界领先的26岁以下学生和青少年旅行预订网站:StudentUniverse
2018/07/01 全球购物
波兰运动鞋网上商店:Distance.pl
2020/07/30 全球购物
毕业生写求职信的要点
2014/03/04 职场文书
股权收购意向书
2014/04/01 职场文书
环保标语口号
2014/06/13 职场文书
会计师事务所实习证明
2014/11/16 职场文书
mysql在项目中怎么选事务隔离级别
2021/05/25 MySQL
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL