首先,建两个sass文件。如图:
![](https://i-blog.csdnimg.cn/blog_migrate/771e23c19dbe2fdc56c5056059a8d2a7.png)
variable.scss文件代码如下:
// 存放变量
$font_size_22:22px;
$font_size_24:23px;
$font_size_26:36px;
$font_size_28:28px;
$font_size_30:30px;
$font_size_32:32px;
$font_size_34:34px;
$font_size_36:36px;
$font_size_38:38px;
$font_size_40:40px;
mixin.scss文件代码如下:
@charset "utf-8";
@import "./variable"; // 引入变量
@mixin add-size($size) {
font-size: $size;
[data-size="1"] & {
font-size: $font_size_22;
}
[data-size="2"] & {
font-size: $font_size_34;
}
[data-size="3"] & {
font-size: $font_size_26;
}
[data-size="4"] & {
font-size: $font_size_28;
}
[data-size="5"] & {
font-size: $font_size_30;
}
[data-size="6"] & {
font-size: $font_size_32;
}
[data-size="7"] & {
font-size: $font_size_34;
}
[data-size="8"] & {
font-size: $font_size_36;
}
[data-size="9"] & {
font-size: $font_size_38;
}
[data-size="10"] & {
font-size: $font_size_40;
}
}
最后,就是在组件里面使用了。
<el-submenu index="1-1">
<template slot="title">字号:{{fontSize}}</template>
<el-menu-item index="" @click="changeFontSize('2')">大</el-menu-item>
<el-menu-item index="" @click="changeFontSize('1')">中</el-menu-item>
<el-menu-item index="" @click="changeFontSize('0')">小</el-menu-item>
</el-submenu>
当点击时候触发事件:
复制代码
changeFontSize (size) {
if (size === '0') {
this.fontSize = '小'
} else if (size === '1') {
this.fontSize = '中'
} else {
this.fontSize = '大'
}
window.document.documentElement.setAttribute('data-size', size)
}
复制代码
组件style里面引入sass文件,一定要引入,我没引就报错了。代码:
@import "../../../static/css/mixin";
.el-table {
@include add-size($font_size_15);
}
.el-submenu__title {
@include add-size($font_size_15);
}
.el-input {
@include add-size($font_size_15);
}