全局添加输入框空格校验

This commit is contained in:
GGJ
2024-12-25 10:53:07 +08:00
parent 90efcc4ad2
commit aed771578a
98 changed files with 703 additions and 904 deletions

View File

@@ -1,24 +1,24 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
<el-dialog draggable class="cn-operate-dialog" v-model.trim="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" class="form-two">
<el-form-item label="用户名称:">
<el-input v-model="form.name" :disabled="true"></el-input>
<el-input v-model.trim="form.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="登录名称:" class="top">
<el-input v-model="form.loginName" :disabled="true"></el-input>
<el-input v-model.trim="form.loginName" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="归属部门名称:" class="top">
<el-input v-model="form.deptName" :disabled="true"></el-input>
<el-input v-model.trim="form.deptName" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="拥有的角色:" class="top">
<el-input v-model="form.role" :disabled="true"></el-input>
<el-input v-model.trim="form.role" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="电话号码:" class="top">
<el-input v-model="form.phone" :disabled="true"></el-input>
<el-input v-model.trim="form.phone" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="电子邮箱:" class="top">
<el-input v-model="form.email" :disabled="true"></el-input>
<el-input v-model.trim="form.email" :disabled="true"></el-input>
</el-form-item>
</el-form>
</el-scrollbar>

View File

@@ -1,18 +1,15 @@
<template>
<el-dialog draggable width="500px" v-model="dialogVisible" :title="title">
<el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
<el-scrollbar>
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" class="form-one" ref="formRef">
<el-form-item label="校验密码:" prop="password">
<el-input v-model="form.password" type="password"
placeholder="请输入校验密码" show-password />
<el-input v-model.trim="form.password" type="password" placeholder="请输入校验密码" show-password />
</el-form-item>
<el-form-item label="新密码:" prop="newPwd" >
<el-input v-model="form.newPwd" type="password" placeholder="请输入新密码"
show-password />
<el-form-item label="新密码:" prop="newPwd">
<el-input v-model.trim="form.newPwd" type="password" placeholder="请输入新密码" show-password />
</el-form-item>
<el-form-item label="确认密码:" prop="confirmPwd" >
<el-input v-model="form.confirmPwd" type="password"
placeholder="请输入确认密码" show-password />
<el-form-item label="确认密码:" prop="confirmPwd">
<el-input v-model.trim="form.confirmPwd" type="password" placeholder="请输入确认密码" show-password />
</el-form-item>
</el-form>
</el-scrollbar>

View File

@@ -195,15 +195,13 @@ const clear = () => {
</script>
<template>
<div
:class="prefixCls"
<div :class="prefixCls"
class="fixed right-0 top-[45%] h-40px w-40px cursor-pointer bg-[var(--el-color-primary)] text-center leading-40px"
@click="drawer = true"
>
@click="drawer = true">
<Icon color="#fff" icon="ep:setting" />
</div>
<ElDrawer v-model="drawer" :z-index="4000" direction="rtl" size="350px">
<ElDrawer v-model.trim="drawer" :z-index="4000" direction="rtl" size="350px">
<template #header>
<span class="text-16px font-700">{{ t('setting.projectSetting') }}</span>
</template>
@@ -219,28 +217,22 @@ const clear = () => {
<!-- 系统主题 -->
<ElDivider>{{ t('setting.systemTheme') }}</ElDivider>
<ColorRadioPicker
v-model="systemTheme"
<ColorRadioPicker v-model.trim="systemTheme"
:schema="['#409eff', '#009688', '#536dfe', '#ff5c93', '#ee4f12', '#0096c7', '#9c27b0', '#ff9800']"
@change="setSystemTheme"
/>
@change="setSystemTheme" />
<!-- 头部主题 -->
<ElDivider>{{ t('setting.headerTheme') }}</ElDivider>
<ColorRadioPicker
v-model="headerTheme"
<ColorRadioPicker v-model.trim="headerTheme"
:schema="['#fff', '#151515', '#5172dc', '#e74c3c', '#24292e', '#394664', '#009688', '#383f45']"
@change="setHeaderTheme"
/>
@change="setHeaderTheme" />
<!-- 菜单主题 -->
<template v-if="layout !== 'top'">
<ElDivider>{{ t('setting.menuTheme') }}</ElDivider>
<ColorRadioPicker
v-model="menuTheme"
<ColorRadioPicker v-model.trim="menuTheme"
:schema="['#fff', '#001529', '#212121', '#273352', '#191b24', '#383f45', '#001628', '#344058']"
@change="setMenuTheme"
/>
@change="setMenuTheme" />
</template>
</div>

View File

@@ -143,82 +143,82 @@ watch(
<div :class="prefixCls">
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.breadcrumb') }}</span>
<ElSwitch v-model="breadcrumb" @change="breadcrumbChange" />
<ElSwitch v-model.trim="breadcrumb" @change="breadcrumbChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.breadcrumbIcon') }}</span>
<ElSwitch v-model="breadcrumbIcon" @change="breadcrumbIconChange" />
<ElSwitch v-model.trim="breadcrumbIcon" @change="breadcrumbIconChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.hamburgerIcon') }}</span>
<ElSwitch v-model="hamburger" @change="hamburgerChange" />
<ElSwitch v-model.trim="hamburger" @change="hamburgerChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.screenfullIcon') }}</span>
<ElSwitch v-model="screenfull" @change="screenfullChange" />
<ElSwitch v-model.trim="screenfull" @change="screenfullChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.sizeIcon') }}</span>
<ElSwitch v-model="size" @change="sizeChange" />
<ElSwitch v-model.trim="size" @change="sizeChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.localeIcon') }}</span>
<ElSwitch v-model="locale" @change="localeChange" />
<ElSwitch v-model.trim="locale" @change="localeChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.messageIcon') }}</span>
<ElSwitch v-model="message" @change="messageChange" />
<ElSwitch v-model.trim="message" @change="messageChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.tagsView') }}</span>
<ElSwitch v-model="tagsView" @change="tagsViewChange" />
<ElSwitch v-model.trim="tagsView" @change="tagsViewChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.tagsViewIcon') }}</span>
<ElSwitch v-model="tagsViewIcon" @change="tagsViewIconChange" />
<ElSwitch v-model.trim="tagsViewIcon" @change="tagsViewIconChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.logo') }}</span>
<ElSwitch v-model="logo" @change="logoChange" />
<ElSwitch v-model.trim="logo" @change="logoChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.uniqueOpened') }}</span>
<ElSwitch v-model="uniqueOpened" @change="uniqueOpenedChange" />
<ElSwitch v-model.trim="uniqueOpened" @change="uniqueOpenedChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.fixedHeader') }}</span>
<ElSwitch v-model="fixedHeader" @change="fixedHeaderChange" />
<ElSwitch v-model.trim="fixedHeader" @change="fixedHeaderChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.footer') }}</span>
<ElSwitch v-model="footer" @change="footerChange" />
<ElSwitch v-model.trim="footer" @change="footerChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.greyMode') }}</span>
<ElSwitch v-model="greyMode" @change="greyModeChange" />
<ElSwitch v-model.trim="greyMode" @change="greyModeChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('setting.fixedMenu') }}</span>
<ElSwitch v-model="fixedMenu" @change="fixedMenuChange" />
<ElSwitch v-model.trim="fixedMenu" @change="fixedMenuChange" />
</div>
<div class="flex items-center justify-between">
<span class="text-14px">{{ t('watermark.watermark') }}</span>
<ElInput v-model="water" class="right-1 w-20" @change="setWater()" />
<ElInput v-model.trim="water" class="right-1 w-20" @change="setWater()" />
</div>
</div>
</template>

View File

@@ -28,17 +28,8 @@ const themeChange = (val: boolean) => {
</script>
<template>
<ElSwitch
v-model="isDark"
:active-color="blackColor"
:active-icon="Sun"
:border-color="blackColor"
:class="prefixCls"
:inactive-color="blackColor"
:inactive-icon="CrescentMoon"
inline-prompt
@change="themeChange"
/>
<ElSwitch v-model.trim="isDark" :active-color="blackColor" :active-icon="Sun" :border-color="blackColor"
:class="prefixCls" :inactive-color="blackColor" :inactive-icon="CrescentMoon" inline-prompt @change="themeChange" />
</template>
<style lang="scss" scoped>
:deep(.el-switch__core .el-switch__inner .is-icon) {

View File

@@ -46,7 +46,7 @@ const loginOut = async () => {
await userStore.loginOut()
tagsViewStore.delAllViews()
replace('/login?redirect=/index')
} catch {}
} catch { }
}
const toProfile = async () => {
push('/user/profile')
@@ -86,7 +86,7 @@ const toDocument = () => {
</template>
</ElDropdown>
<LockDialog v-if="dialogVisible" v-model="dialogVisible" />
<LockDialog v-if="dialogVisible" v-model.trim="dialogVisible" />
<teleport to="body">
<transition name="fade-bottom" mode="out-in">

View File

@@ -60,7 +60,7 @@ const handleLock = async () => {
</script>
<template>
<Dialog v-model="dialogVisible" width="500px" max-height="170px" :class="prefixCls" :title="dialogTitle">
<Dialog v-model.trim="dialogVisible" width="500px" max-height="170px" :class="prefixCls" :title="dialogTitle">
<div class="flex flex-col items-center">
<img :src="avatar" alt="" class="w-70px h-70px rounded-[50%]" />
<span class="text-14px my-10px text-[var(--top-header-text-color)]">
@@ -69,7 +69,7 @@ const handleLock = async () => {
</div>
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
<el-form-item :label="t('lock.lockPassword')" prop="password">
<el-input maxlength="32" show-word-limit type="password" v-model="formData.password"
<el-input maxlength="32" show-word-limit type="password" v-model.trim="formData.password"
:placeholder="'请输入' + t('lock.lockPassword')" clearable show-password />
</el-form-item>
</el-form>

View File

@@ -50,7 +50,7 @@ async function unLock() {
// 返回登录
async function goLogin() {
await userStore.loginOut().catch(() => {})
await userStore.loginOut().catch(() => { })
// 登出后清理
deleteUserCache() // 清空用户缓存
tagsViewStore.delAllViews()
@@ -66,12 +66,9 @@ function handleShowForm(show = false) {
<template>
<div :class="prefixCls" class="fixed inset-0 flex h-screen w-screen bg-black items-center justify-center">
<div
:class="`${prefixCls}__unlock`"
<div :class="`${prefixCls}__unlock`"
class="absolute top-0 left-1/2 flex pt-5 h-16 items-center justify-center sm:text-md xl:text-xl text-white flex-col cursor-pointer transform translate-x-1/2"
@click="handleShowForm(false)"
v-show="showDate"
>
@click="handleShowForm(false)" v-show="showDate">
<Icon icon="ep:lock" />
<span>{{ t('lock.unlock') }}</span>
</div>
@@ -96,29 +93,18 @@ function handleShowForm(show = false) {
{{ userName }}
</span>
</div>
<ElInput type="password" :placeholder="t('lock.placeholder')" class="enter-x" v-model="password" />
<ElInput type="password" :placeholder="t('lock.placeholder')" class="enter-x"
v-model.trim="password" />
<span :class="`text-14px ${prefixCls}-entry__err-msg enter-x`" v-if="errMsg">
{{ t('lock.message') }}
</span>
<div :class="`${prefixCls}-entry__footer enter-x`">
<ElButton
type="primary"
size="small"
class="mt-2 mr-2 enter-x"
link
:disabled="loading"
@click="handleShowForm(true)"
>
<ElButton type="primary" size="small" class="mt-2 mr-2 enter-x" link :disabled="loading"
@click="handleShowForm(true)">
{{ t('common.back') }}
</ElButton>
<ElButton
type="primary"
size="small"
class="mt-2 mr-2 enter-x"
link
:disabled="loading"
@click="goLogin"
>
<ElButton type="primary" size="small" class="mt-2 mr-2 enter-x" link :disabled="loading"
@click="goLogin">
{{ t('lock.backToLogin') }}
</ElButton>
<ElButton type="primary" class="mt-2" size="small" link @click="unLock()" :disabled="loading">
@@ -193,6 +179,7 @@ $error-color: #ed6f6f;
font-size: 90px;
}
}
@media screen and (min-width: $screen-lg) {
span:not(.meridiem) {
font-size: 220px;
@@ -204,6 +191,7 @@ $error-color: #ed6f6f;
font-size: 260px;
}
}
@media screen and (min-width: $screen-2xl) {
span:not(.meridiem) {
font-size: 320px;