uniapp输入密码显示或者隐藏
文章描述：
uniapp注册登录的时候输入密码框显示或者隐藏功能，这样可以友好的让用户检查自己输入的密码和保护隐私。
默认隐藏
点击显示
template
<template>
<view class="container">
<view class="pwd-view">
<input type="text" :password="showPassword" placeholder="请输入密码"/>
<view @click="showPwd" class="pwdmodel"><image :src="pwdIcon" class="pwdImg"></image></view>
</view>
</view>
</template>script
在script这里根据用户点击显示不同图标
export default {
data() {
return {
showPassword: true,
pwdIcon:"../../static/img/pwd1.png",
}
},
methods: {
showPwd: function() {
this.showPassword = !this.showPassword;
if(this.showPassword == true){
this.pwdIcon = '../../static/img/pwd1.png'
}else{
this.pwdIcon = '../../static/img/pwd2.png'
}
}
}
}style
.container{ padding: 30upx; }
.pwd-view{ display: flex; justify-content: space-between; border-bottom: 1upx solid #eee; padding: 20upx 0; }
input{ font-size: 24upx; padding: 10upx 0 0 0; width: 80%; }
.pwdmodel{ padding:10upx 0 10upx 20upx; }
.pwdImg{ width: 32upx ; height: 24upx; }
发布时间：2022/04/26
发表评论