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 相关文章推荐
JScript的条件编译
May 29 Javascript
javascript call和apply方法
Nov 24 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
20行代码实现的一个CSS覆盖率测试脚本
Jul 07 Javascript
javascript实现unicode与ASCII相互转换的方法
Dec 10 Javascript
javascript Promise简单学习使用方法小结
May 17 Javascript
Bootstrap+jfinal实现省市级联下拉菜单
May 30 Javascript
浅析JavaScript中的array数组类型系统
Jul 18 Javascript
用jQuery.ajaxSetup实现对请求和响应数据的过滤
Dec 20 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 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
需要注意的几个PHP漏洞小结
2012/02/05 PHP
PHP教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
php微信公众平台开发(三)订阅事件处理
2016/12/06 PHP
php生成HTML文件的类方法
2019/10/11 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
修改好的jquery滚动字幕效果实现代码
2011/06/22 Javascript
jquery()函数的三种语法介绍
2013/10/09 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
jQuery中:last-child选择器用法实例
2014/12/31 Javascript
iscroll.js的上拉下拉刷新时无法回弹的解决方法
2016/02/18 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
常用的9个JavaScript图表库详解
2017/12/19 Javascript
微信小程序实现的图片保存功能示例
2019/04/24 Javascript
vue + axios get下载文件功能
2019/09/25 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
2020/11/12 Javascript
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
python脚本监控Tomcat服务器的方法
2018/07/06 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python手写均值滤波
2020/02/19 Python
一款CSS3实现多功能下拉菜单(带分享按)的教程
2014/11/05 HTML / CSS
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
公司同意接收函
2014/01/13 职场文书
网络工程师专家职业发展路线
2014/02/14 职场文书
个人贷款担保书
2014/04/01 职场文书
中学教师师德承诺书
2014/05/23 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
英语教师个人总结
2015/02/09 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书