feat(登录): 添加密码显示/隐藏切换功能
This commit is contained in:
parent
524baaa0bd
commit
1723eabb59
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue