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 相关文章推荐
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
Dec 15 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
jQuery中on()方法用法实例详解
Feb 06 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
Sep 05 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
javascript中对象的定义、使用以及对象和原型链操作小结
Dec 14 Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 Javascript
简述vue中的config配置
Jan 23 Javascript
vue递归获取父元素的元素实例
Aug 07 Javascript
一文搞懂redux在react中的初步用法
Jun 09 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使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
utf8的编码算法 转载
2006/12/27 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
Jquery跨域获得Json时invalid label错误的解决办法
2011/01/11 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
javascript加载xml 并解析各节点的值(实现方法)
2016/10/12 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
小程序分享模块超级详解(推荐)
2019/04/10 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Vue extend的基本用法(实例详解)
2019/12/09 Javascript
python psutil库安装教程
2018/03/19 Python
Python贪心算法实例小结
2018/04/22 Python
python3.x 生成3维随机数组实例
2019/11/28 Python
python-web根据元素属性进行定位的方法
2019/12/13 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Python3利用scapy局域网实现自动多线程arp扫描功能
2021/01/21 Python
canvas基础之图形验证码的示例
2018/01/02 HTML / CSS
澳大利亚墨水站Ink Station:墨水和碳粉打印机墨盒
2019/03/24 全球购物
英国100%防污和防水的靴子:Muck Boot Company
2020/09/08 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
自主招生自荐信范文
2013/12/04 职场文书
违纪检讨书2000字
2014/02/08 职场文书
党员四风剖析材料
2014/08/27 职场文书
庆祝儿童节标语
2014/10/09 职场文书
2014年机关作风建设工作总结
2014/10/23 职场文书
项目经理岗位职责
2015/01/31 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
浪漫的婚礼主持词
2015/06/30 职场文书
Nginx优化服务之网页压缩的实现方法
2021/03/31 Servers
SQL实现LeetCode(176.第二高薪水)
2021/08/04 MySQL
PHP遍历数组的6种方式总结
2021/11/17 PHP