vue3全局控制Element plus所有组件的文字大小

项目框架vue-右上角有控制全文的文字大小

实现：

只能控制element组件的文字及输入框等大小变化，如果是自行添加div,text, span之类的控制不了。

配置流程

APP.vue

使用element的provide，包含app

<el-config-provider :locale="locale" :size="size">

<template><el-config-provider :locale="locale" :size="size"><!-- 开启水印 --><el-watermarkv-if="watermarkEnabled":font="{ color: fontColor }":content="defaultSettings.watermarkContent"class="wh-full"><router-view /></el-watermark><!-- 关闭水印 --><router-view v-else /></el-config-provider>
</template><script setup lang="ts">
import { useAppStore, useSettingsStore } from "@/store";
import defaultSettings from "@/settings";
import { ThemeEnum } from "@/enums/ThemeEnum";const appStore = useAppStore();
const settingsStore = useSettingsStore();const locale = computed(() => appStore.locale);
const size = computed(() => appStore.size);
const watermarkEnabled = computed(() => settingsStore.watermarkEnabled);// 明亮/暗黑主题水印字体颜色适配
const fontColor = computed(() => {return settingsStore.theme === ThemeEnum.DARK? "rgba(255, 255, 255, .15)": "rgba(0, 0, 0, .15)";
});
</script>

点击界面的文字大小时，更新全局变量变更size

const appStore = useAppStore();
const size = computed(() => appStore.size);

 useAppStore() 点击按钮时，会调用到的事件

function changeSize(val: string) {size.value = val;
}

 切换：操作日记是一个div不会变，表格是el-table，会根据大小变化。