Vue基于iview实现登录密码的显示与隐藏功能


Posted in Javascript onMarch 06, 2020

iview简介

iView 是一套基于 Vue.js 的开源 UI 组件库,主要服务于 PC 界面的中后台产品。

1.背景

近期,在使用abp开发项目过程中,前端vue输入登录密码时默认隐藏,但是如果用户输错密码需要切换显示跟隐藏。故有此文。

2.实现最终效果

2.1 隐藏密码

Vue基于iview实现登录密码的显示与隐藏功能 

2.2 显示密码

Vue基于iview实现登录密码的显示与隐藏功能 

显示密码需要点击密码框左侧眼睛

3.实现思路

3.1 v-if判断当前密码显示状态

密码输入框跟密码图标最外层用Div标签包住,并且用vue的v-if v-else监听其显示还是隐藏状态。

<div >
 <div v-if="switchPassDisFlag">
 <div v-on:click="SwitchPassDis">
 <i class="ivu-iivu-icon-ios-eye-off-outline ivu-input-iivu-input-icon-normal" style="left:0"></i>
 </div>
 <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="password" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0"> 
 </div>
 <div v-else>
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-outlivu-input-icon ivu-input-icon-normstyle="left:0"></i>
 </div>
 <input v-model="loginModel.passwoautocomplete="off" spellcheck="faltype="text" :placeholde('PasswordPlaceholder')" class="ivu-inivu-input-large" style="padding-left:3padding-right:0"> 
 </div>  
</div>

定义显示状态值switchPassDisFlag默认情况是隐藏。

switchPassDisFlag:boolean=false

这里用得是typescript强类型,所以需要定义成boolean类型,之所以定义成boolean类型是为了下面监听图标点击事件中状态取反方便。

3.2 密码隐藏状态

使用Div标签包住图标跟密码输入框,并且设置闭眼图标,输入框类型为password。

使用图标如下:

选中Iview页面的图标菜单如下图

Vue基于iview实现登录密码的显示与隐藏功能 

选中如下图的两只眼睛即可

Vue基于iview实现登录密码的显示与隐藏功能 

密码隐藏状态下,显示闭眼图标,跟密码类型,同时监听眼睛图标的点击事件,以便切换到睁眼状态(即密码显示状态)。

div v-if="switchPassDisFlag">
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-off-outline ivu-input-icon ivu-input-icon-normal" style="left:0"></i> 
 </div>
 <input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="password" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" style="padding-left:32px;padding-right:0"> 
</div>

3.3 密码显示状态

密码显示状态下,显示睁眼图标,跟text类型,同时监听眼睛图标的点击事件,

以便切换到闭眼状态。

<div v-else>
 <div v-on:click="SwitchPassDis">
 <i class="ivu-icon ivu-icon-ios-eye-outline ivu-input-icon ivu-input-icon-normal" style="left:0"></i>
 </div>
 <input v-model="loginModel.password" autocomplete="off" spellcheck="false" type="text" :placeholder="L('PasswordPlaceholder')" class="ivu-input ivu-input-large" style="padding-left:32px;padding-right:0"> 
</div>

3.4 两种眼睛图标(睁眼,闭眼)的监听切换密码显示状态事件

SwitchPassDis()
 {
 this.switchPassDisFlag=!this.switchPassDisFlag; 
 }

4.小结

本文不需要引入图片,方便的利用了iview的睁闭眼图标;

利用了vue中 v-if,v-else直接面向标签(即显示数据)编程;

灵活利用了div标签,因为iview的icon图标是无法监听点击事件的,而本文把icon图标用div标签包住,从而实现了点击监听。

总结

到此这篇关于Vue基于iview实现登录密码的显示与隐藏功能的文章就介绍到这了,更多相关vue 登录密码显示隐藏内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
Javascript的表单验证-揭开正则表达式的面纱
Mar 18 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
详解AngularJS中的表单验证(推荐)
Nov 17 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
Jan 25 jQuery
JS实现的合并多个数组去重算法示例
Apr 11 Javascript
在vscode里使用.vue代码模板的方法
Apr 28 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
JS前端宏任务微任务及Event Loop使用详解
Jul 23 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
Mar 06 #Javascript
javascript中可能用得到的全部的排序算法
Mar 05 #Javascript
js的Object.assign用法示例分析
Mar 05 #Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
Mar 05 #Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 #Javascript
vue中使用vue-print.js实现多页打印
Mar 05 #Javascript
koa2的中间件功能及应用示例
Mar 05 #Javascript
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php 数组二分法查找函数代码
2010/02/16 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP执行linux命令常用函数汇总
2016/02/02 PHP
PHP实现负载均衡下的session共用功能
2018/04/17 PHP
用JavaScript获取DOM元素位置和尺寸大小的方法
2013/04/12 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
2014/06/01 Javascript
javascript实现复选框选中属性
2015/03/25 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
简介alert()与console.log()的不同
2015/08/26 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
javascript运算符——逻辑运算符全面解析
2016/06/27 Javascript
JavaScript prototype属性详解
2016/10/25 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
深入理解ES6之数据解构的用法
2018/01/13 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
vue实现搜索功能
2019/05/28 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
JS代码屏蔽F12,右键,粘贴,复制,剪切,选中,操作实例
2019/09/17 Javascript
python numpy和list查询其中某个数的个数及定位方法
2018/06/27 Python
Python实现的序列化和反序列化二叉树算法示例
2019/03/02 Python
Flask使用Pyecharts在单个页面展示多个图表的方法
2019/08/05 Python
python实发邮件实例详解
2019/11/11 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
英国乡村时尚和宠物用品专家:Pet & Country
2018/07/02 全球购物
服装创业计划书范文
2014/02/05 职场文书
2014年酒店年度工作总结
2014/12/10 职场文书
2015年读书月活动总结
2015/03/26 职场文书
建党伟业的观后感
2015/06/01 职场文书
2016年“9.22”世界无车日活动小结
2016/04/05 职场文书
mysql中DCL常用的用户和权限控制
2022/03/31 MySQL