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

这篇文章主要介绍了Vue基于iview如何实现登录密码的显示与隐藏功能,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。

<强> iview简介

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

1。背景

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

2。实现最终效果

2.1隐藏密码

& lt; div 比; 　　,& lt; div  v=皊witchPassDisFlag"比; 　　,& lt; div  v:点击=癝witchPassDis"比; 　　,& lt;小姐:类=癷vu-iivu-icon-ios-eye-off-outline  ivu-input-iivu-input-icon-normal",祝辞& lt;/i> 　　,& lt;/div> 　　,& lt; input  v模型=發oginModel.passwoautocomplete=皁ff",解释清楚=癴altype=皃assword",: placeholde (& # 39; PasswordPlaceholder& # 39;)“,类=癷vu-inivu-input-large",在, 　　,& lt;/div> 　　,& lt; div  v-else> 　　,& lt; div  v:点击=癝witchPassDis"比; 　　,& lt;小姐:类=癷vu-icon  ivu-icon-ios-eye-outlivu-input-icon  ivu-input-icon-norm> & lt;/i> 　　,& lt;/div> 　　,& lt; input  v模型=發oginModel.passwoautocomplete=皁ff",解释清楚=癴altype=皌ext",: placeholde (& # 39; PasswordPlaceholder& # 39;)“,类=癷vu-inivu-input-large",在, 　　,& lt;/div>,, 　　& lt;/div>

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

<代码> switchPassDisFlag:布尔=false

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

3.2密码隐藏状态

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

使用图标如下:

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

div  v=皊witchPassDisFlag"比; 　　,& lt; div  v:点击=癝witchPassDis"比; 　　,& lt;小姐:类=癷vu-icon  ivu-icon-ios-eye-off-outline  ivu-input-icon  ivu-input-icon-normal",祝辞& lt;/i>, 　　,& lt;/div> 　　,& lt; input  v模型=發oginModel.password",自动完成=皁ff",解释清楚=癴alse",类型=皃assword",:占位符=癓 (& # 39; PasswordPlaceholder& # 39;)“,类=癷vu-input  ivu-input-large",在, 　　& lt;/div>

3.3密码显示状态

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

以便切换到闭眼状态。