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
}
}
但是
版权声明:本文为weixin_45862553原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。