vue3全局更改颜色字体大小

1.引入插件，js中修改css,安装vueUse

?

1	npm i  @vueuse/core

(vueuse/core,VueUse是一款基于组合式API的函数集合,https://vueusejs.com/guide/)

2.定义全局css变量，在app.vue中

?

1 2 3 4

:root {   --size: 14px;   --color:black; }

3.组件中

<template>
  <div class="loginContainer">
      <el-button plain type="text" style="position:absolute;left:20px;top:20px;font-size:18px;"
          @click="back">返回</el-button>
      <div class="box">
        <div class="btnBox">按钮</div>
        <div style="margin-bottom:20px;">
          <button @click="change(36)">大</button>
          <button @click="change(24)">中</button>
          <button @click="change(14)">小</button>
        </div>
        <div>
          <button @click="changeColor('red')">红</button>
          <button @click="changeColor('blue')">蓝</button>
          <button @click="changeColor('yellow')">黄</button>
        </div>
      </div>
  </div>
</template>
<!-- 全局更改颜色字体大小 -->
<script lang="ts" setup>
import { ref } from 'vue'
import { useCssVar } from '@vueuse/core'
const back = () => {
  window.history.back()
}
const change = (str: number) => {
  const sizeValue = useCssVar('--size')
  sizeValue.value = `${str}px`
}
const changeColor = (str: string) => {
  const colorValue = useCssVar('--color')
  colorValue.value = str
}
</script>
<style lang="scss" scoped>
.loginContainer {
  height: 100vh;
  width: 100vw;
  padding: 60px;
  box-sizing: border-box;
  cursor: pointer;
}

.box {
  margin-top: 30px;
}
.btnBox{
  height: 50px;
    color: #fff;;
    text-align: center;
    line-height: 50px;
    font-size: var(--size);
    background:var(--color);
    margin-bottom:20px;
}
.itemBox {
  display: flex;
  flex-direction: row;
  margin: 20px auto;
}
</style>

代码地址：https://gitee.com/yuexiayunsheng/vue3learn/commit/ce66333f79f1e2dc783f20f784d871129d2506ce