Vue3 || 一键切换字号/背景色

一键切换字号

.vue

<template>
    <el-select v-model="size" class="m-2" placeholder="字号" @change="changeFontSize">
        <el-option v-for="item in sizes" :key="item.size" :label="item.zihao" :value="item.size" />
    </el-select>
</template>

<script setup>
import { ref } from 'vue'
/**
 * 组件 - 改变字号
 */
//字号选项数组
const size = ref('')
const sizes = [
    {
        size: '0',
        zihao: '小',
    },
    {
        size: '1',
        zihao: '中',
    },
    {
        size: '2',
        zihao: '大',
    }
]

/**
 * el-select@change:data-size传值
 * @method
 * @param   {String}    size            字号的值  
 */
const changeFontSize = (size) => {
    window.document.documentElement.setAttribute('data-size', size);
}
</script>

这里代码就会带着值找data-size，data-size在这儿：
minin.scss

//字体大小（原始，增量）
@mixin add-size($val, $size) {
    font-size: $val+$size !important;
    [data-size="0"] & {
        font-size: $val+$size !important; //小号，增量0
    }
    [data-size="1"] & {
        font-size: $val+$size-2 !important; //中号，增量2
    }
    [data-size="2"] & {
        font-size: $val+$size-4 !important; //大号，增量4
    }
}

[***]是判断的意思，判断完data-size的值就等于得到了font-size的值，font-size的值=原始值$ val+增量值$size，这俩值相当于函数add-size的参数变量，so现在可以调用传参了（less也一样，就是css的写法略有不同）
vue.scss

@import './minin.scss';
.el-button {
    @include add-size($font-size-base, $size);
}

传参的时候又用了变量$ font-size-base和$size，变量传参方便多个组件（.el-button 、.el-card、…）一键切换字号的时候，参数重用。
这些个变量在这儿
variable.scss

//字体大小
$font-size-base:14px;//正确
$font-size-base:var(--el-font-size-base);// 错误，一定注意不能是变量了，变量是理解不了的，出错截图在下面。

//字体增加量
$size:0px;
$size-2:2px;
$size-4:4px;

你看它不是var(–el-font-size-base)+4px

这个东西都被写烂了，总的思路就是这句话：window.document.documentElement.setAttribute('变量名', 值);
其他的东西都可以根据你自己的需求改变
这个思路还可以用来一键换背景色，一键换边框，一键调整容器大小等等。

参考来源：

http://t.csdn.cn/CI6Rl提供了setAttribute的思路
https://www.cnblogs.com/xufeikko/p/10060676.html提供了增量的思路

附：一键切换背景色

.vue

<template>
    <el-select v-model="value" class="m-2" placeholder="主题色" @change="changeTheme">
        <el-option v-for="item in themes" :key="item.value" :label="item.label" :value="item.value" />
    </el-select>
</template>

<script setup>
import { ref } from 'vue'
/**
 * 组件 - 切换主题
 */
//主题色选项数组
const value = ref('')
const themes = [
  {
    value: 'light',
    label: '浅',
  },
  {
    value: 'deep',
    label: '深',
  }
]

/**
 * el-select@change:data-size传值
 * @method
 * @param   {String}    value            主题色的值  
 */
const changeTheme = (value) => {
   window.document.documentElement.setAttribute('data-color', value);
}
</script>

minin.scss

//主题色
@mixin change-color{
    background-color: $color-bg-light !important;
    [data-color="light"] & {
        background-color: $color-bg-light !important; 
    }
    [data-color="deep"] & {
        background-color: $color-bg-dark !important; 
    }
}

vue.scss

@mixin color-bg-box {
    @include change-color;
}
.Mybox {
    @include color-bg-box;
    }

.variable.scss

//主题色
$color-bg-light:rgb(255, 255, 255);
$color-bg-dark:rgb(20, 20, 20);

这里留个小尾巴，一键换肤并非简单地换一个背景色，而是多个组件非常大量的变量值的替换，虽然这种方法可以在minin中定义多个样式值，如：

@mixin change-color{
    [data-color="light"] & {
        background-color: XXX,
        border-color:XXX
    }
}

但是

1. 多个组件怎么区分？需要用类名区分判断，那么怎么写：详见下文 3. 动态切换顶级CSS类名（一个CSS文件）
   提示：仍是setAttribute()
2. 假设一个主题50个颜色变量，两个主题就是100个，代码太长，一个主题一个CSS文件其实是最好的。
   于是，现在的问题是，我有多个主题.css，怎么做到一键切换引入的文件？
   详见下文2. 动态切换多个CSS文件（我的需求）