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 相关文章推荐
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
Sep 04 Javascript
jquery $(document).ready()和window.onload的区别浅析
Feb 04 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
Aug 11 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
vue.js中v-on:textInput无法执行事件问题的解决过程
Jul 12 Javascript
input type=file 选择图片并且实现预览效果的实例
Oct 26 Javascript
jquery中有哪些api jQuery主要API
Nov 20 jQuery
JavaScript剩余操作符Rest Operator详解
Jul 20 Javascript
layui监听select变化,以及设置radio选中的方法
Sep 24 Javascript
使用typescript改造koa开发框架的实现
Feb 04 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
JavaScript 事件冒泡简介及应用
2010/01/11 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
javascript编程异常处理实例小结
2015/11/30 Javascript
javascript类型系统——undefined和null全面了解
2016/07/13 Javascript
JavaScript字符串对象
2017/01/14 Javascript
使用JavaScriptCore实现OC和JS交互详解
2017/03/28 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
2018/08/08 Javascript
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
Python中的self用法详解
2019/08/06 Python
Python tkinter实现简单加法计算器代码实例
2020/05/13 Python
Selenium关闭INFO:CONSOLE提示的解决
2020/12/07 Python
python如何构建mock接口服务
2021/01/28 Python
css3 图片圆形显示 如何CSS将正方形图片显示为圆形图片布局
2014/10/10 HTML / CSS
意大利咖啡、浓缩咖啡和浓缩咖啡机:illy caffe
2019/03/20 全球购物
zooplus波兰:在线宠物店
2019/07/21 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
服装销售人员求职自我评价
2013/09/26 职场文书
大一自我鉴定范文
2013/12/27 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
学生会干部自荐信
2014/02/04 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
节能减耗标语
2014/06/21 职场文书
社区个人对照检查材料(群众路线)
2014/09/26 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
涉及车辆房产分割的离婚协议书范文
2014/10/12 职场文书
学生检讨书范文
2014/10/30 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
小学教育见习总结
2015/06/23 职场文书
2016大学生社会实践心得体会范文
2016/01/14 职场文书
七年级英语教学反思
2016/02/15 职场文书
银行求职信范文
2019/05/13 职场文书
六年级作文之关于梦
2019/10/22 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
vue项目如何打包之项目打包优化(让打包的js文件变小)
2022/04/30 Vue.js