feat(登录): 添加密码显示/隐藏切换功能

This commit is contained in:
yangzhe 2025-10-31 14:44:31 +08:00
parent 524baaa0bd
commit 1723eabb59
1 changed files with 24 additions and 0 deletions

View File

@ -69,12 +69,17 @@
</view> </view>
<view class="input-wrapper"> <view class="input-wrapper">
<input <input
:password="!isShowPassword"
type="text" type="text"
class="form-input" class="form-input"
placeholder="请输入密码" placeholder="请输入密码"
v-model="loginParams.password" v-model="loginParams.password"
@blur="validatePassword" @blur="validatePassword"
/> />
<view class="show-password-icon" @click="toggleShowPassword">
<u-icon v-show="!isShowPassword" name="eye-fill" color="#2979ff" size="32"></u-icon>
<u-icon v-show="isShowPassword" name="eye-off" color="#2979ff" size="32"></u-icon>
</view>
</view> </view>
<text v-if="errors.password" class="error-tip">{{ <text v-if="errors.password" class="error-tip">{{
errors.password errors.password
@ -157,6 +162,7 @@ export default {
data() { data() {
return { return {
isTeacher: false, // isTeacher: false, //
isShowPassword: false, //
// //
loginParams: { loginParams: {
@ -197,11 +203,17 @@ export default {
this.clearErrors(); this.clearErrors();
this.clearLoginParams(); this.clearLoginParams();
this.loginType = type; this.loginType = type;
this.isShowPassword = false;
if (this.loginType === "code") { if (this.loginType === "code") {
this.refreshCaptcha(); this.refreshCaptcha();
} }
}, },
//
toggleShowPassword() {
this.isShowPassword = !this.isShowPassword;
},
// //
refreshCaptcha() { refreshCaptcha() {
// //
@ -694,6 +706,18 @@ export default {
height: 100%; height: 100%;
} }
} }
.show-password-icon {
position: absolute;
right: 10rpx;
top: 50%;
transform: translateY(-50%);
height: 60rpx;
width: 60rpx;
display: flex;
align-items: center;
justify-content: center;
}
} }
} }
} }