perf element global config

LiuHao

2023-04-02 d95fab75a7f1b86d9eb48f7d2818b97070b5d36a

perf element global config

 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(() => {

 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;
}
}

 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;
}
}

 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>


 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>

 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、default、small
    size: Cookies.get('size') || 'default'
});

// 修改 el-dialog 默认点击遮照为不关闭
(app._context.components.ElDialog as any).props.closeOnClickModal.default = false;

app.mount('#app');

 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']>

 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']