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 相关文章推荐
HTML页面如何象ASP一样接受参数
Feb 07 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
IE6图片加载的一个BUG解决方法
Jul 13 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
JavaScript中switch语句的用法详解
Jun 03 Javascript
js实现的光标位置工具函数示例
Oct 03 Javascript
jQuery实现优雅的弹窗效果(6)
Feb 08 Javascript
javascript中BOM基础知识总结
Feb 14 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
深入解析koa之异步回调处理
Jun 17 Javascript
JS实现在线ps功能详解
Jul 31 Javascript
Vue快速实现通用表单验证的方法
Feb 24 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
用libTemplate实现静态网页的生成
2006/10/09 PHP
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
详解PHP编码转换函数应用技巧
2016/10/22 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
PHP程序员简单的开展服务治理架构操作详解(三)
2020/05/14 PHP
jQuery 操作option的实现代码
2011/03/03 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
2013/12/28 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
jQuery性能优化技巧分析
2015/02/20 Javascript
基于Jquery实现仿百度百科右侧导航代码附源码下载
2015/11/27 Javascript
JavaScript禁止复制与粘贴的实现代码
2016/05/16 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
2016/11/07 Javascript
详解html-webpack-plugin插件(用法总结)
2018/09/12 Javascript
angular 未登录状态拦截路由跳转的方法
2018/10/09 Javascript
9种方法优化jQuery代码详解
2020/02/04 jQuery
[22:20]初生之犊-TI4第5名LGD战队纪录片
2014/08/13 DOTA
python基于urllib实现按照百度音乐分类下载mp3的方法
2015/05/25 Python
Python实现网络端口转发和重定向的方法
2016/09/19 Python
Python进阶_关于命名空间与作用域(详解)
2017/05/29 Python
python读取Excel实例详解
2018/08/17 Python
python 并发编程 非阻塞IO模型原理解析
2019/08/20 Python
TensorFlow 输出checkpoint 中的变量名与变量值方式
2020/02/11 Python
python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
2020/04/24 Python
tensorflow 2.0模式下训练的模型转成 tf1.x 版本的pb模型实例
2020/06/22 Python
美国儿童运动鞋和服装零售商:Kids Foot Locker
2017/08/05 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Java提供了哪些企业应用编程接口
2015/02/13 面试题
工伤私了协议书范本
2014/11/24 职场文书
士兵突击观后感
2015/06/16 职场文书
PHP中国际化的字符串排序和比较对象详解
2021/08/23 PHP
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis