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

最新推荐文章于 2025-06-30 16:45:49 发布

原创最新推荐文章于 2025-06-30 16:45:49 发布 · 1.9k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

练习专栏收录该内容

1 篇文章

订阅专栏

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

<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>