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 相关文章推荐
JavaScript this调用规则说明
Mar 08 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
sencha touch 模仿tabpanel导航栏TabBar的实例代码
Oct 24 Javascript
浅谈javascript语法和定时函数
May 03 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
jQuery实现base64前台加密解密功能详解
Aug 29 jQuery
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
原生js中ajax访问的实例详解
Sep 19 Javascript
Node之简单的前后端交互(实例讲解)
Nov 14 Javascript
小程序实现选择题选择效果
Nov 04 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 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
Zerg剧情介绍
2020/03/14 星际争霸
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
Google Map API更新实现用户自定义标注坐标
2009/07/29 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
Ext JS框架程序中阻止键盘触发回退或者刷新页面的代码分享
2016/06/07 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
VUE 配置vue-devtools调试工具及安装方法
2018/09/30 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
python测试驱动开发实例
2014/10/08 Python
Python内建函数之raw_input()与input()代码解析
2017/10/26 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
python Pexpect 实现输密码 scp 拷贝的方法
2019/01/03 Python
python 两个数据库postgresql对比
2019/10/21 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python3的socket使用方法详解
2020/02/18 Python
使用python接受tgam的脑波数据实例
2020/04/09 Python
使用Python实现将多表分批次从数据库导出到Excel
2020/05/15 Python
django rest framework 过滤时间操作
2020/07/12 Python
python如何实现图片压缩
2020/09/11 Python
CSS3 media queries + jQuery实现响应式导航
2016/09/30 HTML / CSS
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
Expedia印度:您的一站式在线旅游网站
2017/08/24 全球购物
模具专业毕业生自荐书范文
2014/02/19 职场文书
运动会的口号
2014/06/09 职场文书
毕业生应聘求职信
2014/07/10 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
停车场管理制度范本
2015/08/05 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python
mysql 体系结构和存储引擎介绍
2022/05/06 MySQL