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

最新推荐文章于 2024-07-04 00:59:27 发布

SophiaJZ

最新推荐文章于 2024-07-04 00:59:27 发布

阅读量2.5k

点赞数 2

分类专栏： Vue+ivew 学习&实战文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/SophiaJZ/article/details/109526048

版权

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

1. 背景
2. 最终效果
- 2.1 隐藏密码
- 2.2 显示密码
3. 实现步骤
4. 小结

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">
	<Input
		type="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">
	<Input
		type="text"
		style="width: 250px"
		v-model="formItem.password"
	/>
	<Icon @click