feat(登录): 添加密码显示/隐藏切换功能
This commit is contained in:
parent
524baaa0bd
commit
1723eabb59
|
|
@ -69,12 +69,17 @@
|
|||
</view>
|
||||
<view class="input-wrapper">
|
||||
<input
|
||||
:password="!isShowPassword"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="请输入密码"
|
||||
v-model="loginParams.password"
|
||||
@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>
|
||||
<text v-if="errors.password" class="error-tip">{{
|
||||
errors.password
|
||||
|
|
@ -157,6 +162,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
isTeacher: false, // 是否是教师
|
||||
isShowPassword: false, // 是否显示密码
|
||||
|
||||
// 登录参数
|
||||
loginParams: {
|
||||
|
|
@ -197,11 +203,17 @@ export default {
|
|||
this.clearErrors();
|
||||
this.clearLoginParams();
|
||||
this.loginType = type;
|
||||
this.isShowPassword = false;
|
||||
if (this.loginType === "code") {
|
||||
this.refreshCaptcha();
|
||||
}
|
||||
},
|
||||
|
||||
// 切换显示密码
|
||||
toggleShowPassword() {
|
||||
this.isShowPassword = !this.isShowPassword;
|
||||
},
|
||||
|
||||
// 刷新图形验证码
|
||||
refreshCaptcha() {
|
||||
// 获取图形验证码
|
||||
|
|
@ -694,6 +706,18 @@ export default {
|
|||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue