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文件(我的需求)

版权声明:本文为weixin_45862553原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
THE END
< <上一篇
下一篇>>