uni-app 点击小眼睛显示/隐藏密码

最新推荐文章于 2024-04-07 17:47:33 发布

诺多游侠

最新推荐文章于 2024-04-07 17:47:33 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：练习文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/wang5590/article/details/117731401

练习专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在uni-app中实现点击小眼睛图标，切换显示或隐藏密码的功能。通过监听点击事件，动态修改输入框类型来达到切换效果，同时提供了一种优化用户体验的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
	<view>
		<form>
			<view class="cu-form-group margin-lg ">
				<input placeholder="请确认新密码" type="text" :password="showPassword" v-model="newPwds" name="input"></input>
				<text :class="[!showPassword ?'cuIcon-attentionfill' : 'cuIcon-attentionforbidfill']" class="text-gray"  @click="showPwd" ></text>
			</view>
		</form>
</template>


<script>
	export default {
		data() {
			return {
				showPassword: true,
			}
		},
		methods: {
			showPwd: function() {
			          this.showPassword = !this.showPassword;
			           },
        }	
	}
</script>

<style>

</style>