Merge pull request #8271 from dataease/pr@dev-v2_dzz_mobile

fix(移动端): 增加密码输入框图标
This commit is contained in:
dataeaseShu 2024-03-01 15:32:27 +08:00 committed by GitHub
commit 51fe632839
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 42 additions and 4 deletions

View File

@ -46,6 +46,10 @@ const validatePwd = value => {
return regep.test(value) return regep.test(value)
} }
const visible = ref(true)
const clickRightIcon = () => {
visible.value = !visible.value
}
const onSubmit = async () => { const onSubmit = async () => {
if (!checkUsername(username.value) || !validatePwd(password.value)) { if (!checkUsername(username.value) || !validatePwd(password.value)) {
showToast({ showToast({
@ -106,13 +110,21 @@ const usernameEndValidate = ({ status, message }) => {
</div> </div>
<van-field <van-field
v-model="password" v-model="password"
type="password" :type="visible ? 'password' : 'text'"
@click-right-icon="clickRightIcon"
:style="{ borderColor: !!passwordError ? '#F54A45' : '#bbbfc4' }" :style="{ borderColor: !!passwordError ? '#F54A45' : '#bbbfc4' }"
name="密码" name="密码"
placeholder="请输入密码" placeholder="请输入密码"
:rules="[{ required: true, message: '请填写密码' }]" :rules="[{ required: true, message: '请填写密码' }]"
@end-validate="passwordEndValidate" @end-validate="passwordEndValidate"
/> >
<template #right-icon>
<el-icon>
<Icon v-if="visible" name="icon_invisible_outlined"></Icon>
<Icon v-else name="icon_visible_outlined"></Icon>
</el-icon>
</template>
</van-field>
<div v-if="!!passwordError" class="van-ed-error"> <div v-if="!!passwordError" class="van-ed-error">
{{ passwordError }} {{ passwordError }}
</div> </div>
@ -159,6 +171,15 @@ const usernameEndValidate = ({ status, message }) => {
color: #f54a45; color: #f54a45;
} }
.van-field__right-icon {
padding: 0;
display: flex;
align-items: center;
justify-content: center;
margin-right: -2px;
font-size: 20px;
}
.van-field { .van-field {
border: 1px solid #bbbfc4; border: 1px solid #bbbfc4;
border-radius: 4px; border-radius: 4px;

View File

@ -599,7 +599,12 @@ const getMenuList = (val: boolean) => {
</div> </div>
</el-aside> </el-aside>
<div class="dataset-content" :class="(isDataEaseBi || isIframe) && 'h100'"> <div
class="dataset-content"
:class="{
auto: isIframe
}"
>
<template v-if="!state.datasetTree.length && mounted"> <template v-if="!state.datasetTree.length && mounted">
<empty-background description="暂无数据集" img-type="none"> <empty-background description="暂无数据集" img-type="none">
<el-button <el-button
@ -794,6 +799,9 @@ const getMenuList = (val: boolean) => {
.dataset-content { .dataset-content {
background: #f5f6f7; background: #f5f6f7;
&.auto {
height: auto;
}
} }
.dataset-list { .dataset-list {

View File

@ -808,7 +808,13 @@ const getMenuList = (val: boolean) => {
</div> </div>
</el-aside> </el-aside>
<div class="datasource-content" :class="(isDataEaseBi || isIframe) && 'h100'"> <div
class="datasource-content"
:class="{
auto: isIframe,
h100: isDataEaseBi || isIframe
}"
>
<template v-if="!state.datasourceTree.length && mounted"> <template v-if="!state.datasourceTree.length && mounted">
<empty-background description="暂无数据源" img-type="none"> <empty-background description="暂无数据源" img-type="none">
<el-button <el-button
@ -1620,6 +1626,9 @@ const getMenuList = (val: boolean) => {
.datasource-content { .datasource-content {
background: #f5f6f7; background: #f5f6f7;
overflow-y: auto; overflow-y: auto;
&.auto {
height: auto;
}
} }
.m24 { .m24 {