首页 前端知识 vue3全局控制Element plus所有组件的文字大小

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

2024-08-22 23:08:10 前端知识 前端哥 203 307 我要收藏

项目框架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-watermark
      v-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,会根据大小变化。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/16551.html
标签
评论
发布的文章

【Jquery】jquery的简单使用

2024-09-01 00:09:11

NodeJs使用jQuery中$Ajax

2024-09-01 00:09:45

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!