From d95fab75a7f1b86d9eb48f7d2818b97070b5d36a Mon Sep 17 00:00:00 2001
From: LiuHao <liuhaoai545@gmail.com>
Date: 星期日, 02 四月 2023 14:15:47 +0800
Subject: [PATCH] perf element global config
---
src/assets/styles/index.scss | 6 ++++--
src/types/components.d.ts | 1 +
src/assets/styles/element-ui.scss | 8 ++------
src/layout/components/Settings/index.vue | 4 +++-
src/App.vue | 8 +++++++-
src/components/SizeSelect/index.vue | 5 +----
src/types/auto-imports.d.ts | 4 ----
src/main.ts | 15 ---------------
8 files changed, 18 insertions(+), 33 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 0f25eb6..d073319 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,10 +1,16 @@
<template>
- <router-view />
+ <el-config-provider :locale="appStore.locale" :size="size">
+ <router-view />
+ </el-config-provider>
</template>
<script setup lang="ts">
import useSettingsStore from '@/store/modules/settings'
import { handleThemeStyle } from '@/utils/theme'
+import useAppStore from '@/store/modules/app';
+
+const appStore = useAppStore();
+const size = computed(() => appStore.size as any);
onMounted(() => {
nextTick(() => {
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index cad21e6..44731b6 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -88,14 +88,10 @@
box-sizing: content-box;
}
-.el-menu--collapse > div > .el-submenu > .el-submenu__title .el-submenu__icon-arrow {
+.el-menu--collapse>div>.el-submenu>.el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.el-dropdown .el-dropdown-link {
color: var(--el-color-primary) !important;
-}
-
-.el-dialog {
- border-radius: 3% !important;
-}
+}
\ No newline at end of file
diff --git a/src/assets/styles/index.scss b/src/assets/styles/index.scss
index db6fe82..dd052f6 100644
--- a/src/assets/styles/index.scss
+++ b/src/assets/styles/index.scss
@@ -6,7 +6,8 @@
@import './btn.scss';
@import './ruoyi.scss';
@import 'animate.css';
-//@import 'element-plus/dist/index.css';
+// @import 'element-plus/dist/index.css';
+
body {
height: 100%;
margin: 0;
@@ -127,6 +128,7 @@
.app-container {
padding: 20px;
}
+
// search闈㈡澘鏍峰紡
.panel,
.search {
@@ -204,4 +206,4 @@
.multiselect--active {
z-index: 1000 !important;
-}
+}
\ No newline at end of file
diff --git a/src/components/SizeSelect/index.vue b/src/components/SizeSelect/index.vue
index a2b38d6..fb28e05 100644
--- a/src/components/SizeSelect/index.vue
+++ b/src/components/SizeSelect/index.vue
@@ -1,10 +1,9 @@
<script setup lang="ts">
import useAppStore from "@/store/modules/app";
-import { ComponentInternalInstance } from "vue";
const appStore = useAppStore();
const size = computed(() => appStore.size);
-const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+
const sizeOptions = ref([
{ label: "杈冨ぇ", value: "large" },
{ label: "榛樿", value: "default" },
@@ -12,9 +11,7 @@
]);
const handleSetSize = (size: string) => {
- proxy?.$modal.loading("姝ｅ湪璁剧疆甯冨眬澶у皬锛岃绋嶅��...");
appStore.setSize(size);
- setTimeout("window.location.reload()", 1000);
}
</script>
diff --git a/src/layout/components/Settings/index.vue b/src/layout/components/Settings/index.vue
index 132a7ed..9bd345f 100644
--- a/src/layout/components/Settings/index.vue
+++ b/src/layout/components/Settings/index.vue
@@ -11,6 +11,8 @@
const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
+
+
const showSettings = ref(false);
const theme = ref(settingsStore.theme);
const sideTheme = ref(settingsStore.sideTheme);
@@ -99,7 +101,7 @@
</script>
<template>
- <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px">
+ <el-drawer v-model="showSettings" :withHeader="false" direction="rtl" size="300px" close-on-click-modal>
<div class="setting-drawer-title">
<h3 class="drawer-title">涓婚椋庢牸璁剧疆</h3>
</div>
diff --git a/src/main.ts b/src/main.ts
index bef444b..32d2c45 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,4 @@
import { createApp } from 'vue';
-import Cookies from 'js-cookie';
-// element-plus
-import ElementPlus from 'element-plus';
-import locale from 'element-plus/lib/locale/lang/zh-cn';
-
// global css
import 'uno.css';
import '@/assets/styles/index.scss';
@@ -54,15 +49,5 @@
app.use(plugins);
// 鑷畾涔夋寚浠�
directive(app);
-
-// 浣跨敤element-plus 骞朵笖璁剧疆鍏ㄥ眬鐨勫ぇ灏�
-app.use(ElementPlus, {
- locale: locale,
- // 鏀寔 large銆乨efault銆乻mall
- size: Cookies.get('size') || 'default'
-});
-
-// 淇敼 el-dialog 榛樿鐐瑰嚮閬収涓轰笉鍏抽棴
-(app._context.components.ElDialog as any).props.closeOnClickModal.default = false;
app.mount('#app');
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 6ced9ee..9e54a50 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -8,8 +8,6 @@
const ElMessageBox: typeof import('element-plus/es')['ElMessageBox']
const ElNotification: typeof import('element-plus/es')['ElNotification']
const ElSelect: typeof import('element-plus/es')['ElSelect']
- const ElTable: typeof import('element-plus/es')['ElTable']
- const ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
@@ -295,8 +293,6 @@
readonly ElMessageBox: UnwrapRef<typeof import('element-plus/es')['ElMessageBox']>
readonly ElNotification: UnwrapRef<typeof import('element-plus/es')['ElNotification']>
readonly ElSelect: UnwrapRef<typeof import('element-plus/es')['ElSelect']>
- readonly ElTable: UnwrapRef<typeof import('element-plus/es')['ElTable']>
- readonly ElTreeSelect: UnwrapRef<typeof import('element-plus/es')['ElTreeSelect']>
readonly acceptHMRUpdate: UnwrapRef<typeof import('pinia')['acceptHMRUpdate']>
readonly asyncComputed: UnwrapRef<typeof import('@vueuse/core')['asyncComputed']>
readonly autoResetRef: UnwrapRef<typeof import('@vueuse/core')['autoResetRef']>
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 1c855e4..9f02c4b 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -17,6 +17,7 @@
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
ElCol: typeof import('element-plus/es')['ElCol']
ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+ ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
ElDialog: typeof import('element-plus/es')['ElDialog']
ElDivider: typeof import('element-plus/es')['ElDivider']
--
Gitblit v1.9.3