1. 背景

在登录输入或给账户设置密码的时候，需要查看明文密码，需设计密码控制隐藏功能，故有此文。

2. 最终效果

2.1 隐藏密码

2.2 显示密码

小眼睛控制密码显示隐藏

3. 实现步骤

3.1 使用v-if、v-else

基于iview的 Form 表单，使用<div>标签包裹住<FormItem>表单项包裹住，利用v-if、v-else控制密码框的显示和隐藏。

<FormItem v-if="flag" label="密码:" prop="password"><Inputtype="password"style="width: 250px"v-model="formItem.password"/><Icon @click="handlePassword" type="ios-eye-off-outline" size="22" />
</FormItem><FormItem v-else label="密码:" prop="password"><Inputtype="text"style="width: 250px"v-model="formItem.password"/><Icon @click="handlePassword" type="ios-eye-outline" size="22" />
</FormItem>

3.2 密码隐藏

设置 Boolean类型变量 flag = true，监听点击事件。
使用<div v-if=“flag”>标签包裹住<FormItem>标签，<Input>标签设置type=“password”，<Icon>标签设置为闭眼图标，绑定点击事件handlePassword，点击切换为睁眼图标（密码显示状态）。

<FormItem v-if="flag" label="密码:" prop="password"><Inputtype="password"style="width: 250px"v-model="formItem.password"/><Icon @click="handlePassword" type="ios-eye-off-outline" size="22" />
</FormItem>

3.3 密码显示

使用<div v-else>标签包裹住<FormItem>标签，<Input>标签设置type=“text”，<Icon>标签设置为睁眼图标，绑定点击事件handlePassword，点击切换为闭眼图标（密码隐藏状态）。

<FormItem v-else label="密码:" prop="password"><Inputtype="text"style="width: 250px"v-model="formItem.password"/><Icon @click="handlePassword" type="ios-eye-outline" size="22" />
</FormItem>

3.4 切换点击事件

为Icon图标绑定点击事件，利用flag，控制显示隐藏。

handlePassword () {this.flag = !this.flag
}

3.5 完整代码

<template><Form ref="formItem" :model="formItem" :label-width="150"><FormItem label="用户名：" prop="username"><Inputtype="text"placeholderstyle="width: 250px"v-model="formItem.username"/></FormItem><FormItem v-if="flag" label="密码:" prop="password"><Inputtype="password"placeholderstyle="width: 250px"v-model="formItem.password"/><Icon @click="handlePassword" type="ios-eye-off-outline" size="22" /></FormItem><FormItem v-else label="密码:" prop="password"><Inputtype="text"placeholderstyle="width: 250px"v-model="formItem.password"/><Icon @click="handlePassword" type="ios-eye-outline" size="22" /></FormItem></Form>
</template><script>
export default {data () {return {formItem: {username: '',password: ''},flag: true}},methods: {handlePassword () {this.flag = !this.flag}}
}
</script>

4. 小结

利用iview的Form表单、Icon图标，并给Icon绑定点击事件；
利用Vue的v-if、v-else条件渲染，控制显示隐藏。

参考博文：https://www.cnblogs.com/JerryMouseLi/p/12422094.html

Vue+iview 密码框输入显示隐藏控制相关推荐

html密码框输入内容隐藏,密码框显示提示文字的功能实现
在密码输入框内显示提示的文字,引导用户操作,实现的效果如下图显示. 未输入密码前: 输入密码后: 由于js无法直接控制input文本框中的type属性,因此无法通过js控制input文本框在密码框和普 ...
html密码框输入内容隐藏,jQuery输入框密码的显示隐藏【代码分享】
效果图: 代码如下: jQuery输入框密码显示隐藏代码 @font-face {font-family: "iconfont"; src: url('iconfont.eot') ...
react中弹框的显示隐藏
这里讲解一下react组件中常见弹框的显示隐藏~ 在这里主要涉及一个知识点,就是父子组件的通讯. 如图所示: 1- 点击编辑按钮的时候弹出对应的弹框. 2- 在弹框中点击确定或者取消的时候弹框消失. ...
Vue中提示框慢慢显示和慢慢消失方法
Vue中提示框慢慢显示和慢慢消失方法 Vue提供了一个标签属性transition,直接使用就可以了: 用transition标签把需要慢慢显示的组件包起来. 然后在目前组件下面的style属性里面添 ...
HTML里怎么设置密码框为星号,input密码框输入后设置显示为星号或其他样式
预览效果核心代码 {{"*".repeat(text.length)}} :type="type=='number'?'tel':'text'" ref=&q ...
html密码框不显示,密码框中密码的显示与隐藏切换(JS)
目标: 点击小眼睛后, 1.密码框变成文本框: 2.小眼睛图片由闭眼变成睁眼: 3.再次点击后,又变成闭眼+密码框要想实现3,方法1: 则需要一个变量,来辅助判断当前input的属性,如果flag为 ...
angularjs html 支付宝支付,angular仿支付宝密码框输入效果
项目需求,使用ng写一个密码框格子支付模块,一开始使用一个input+letter-spacing来分割字符,但是发现间距非常不好控制,随着字符的输入文本框字符串间距还会自动调整.最终从网上查找到一款 ...
泛微OA系统利用Check框控制字段显示隐藏
如下代码所示: <table>之间为在html模板绘制的表格 <table border="1" width="627" height= ...
vue 解决密码框 input 中type=“password“时，浏览器会回显之前保存的用户名和密码
input的type="password"时,会出现图中现象,之前保存的用户名和密码回显出来 1.为了解决这个问题尝试过以下几种方法: autocomplete="off ...

Vue+iview 密码框输入显示隐藏控制

Vue+iview 密码框输入控制显示隐藏