vue+sass实现切换字体大小

最新推荐文章于 2024-07-18 18:41:56 发布

cyndi_超努力

最新推荐文章于 2024-07-18 18:41:56 发布

阅读量1.2k

点赞数

分类专栏：工作积累文章标签： vue.js sass javascript

本文链接：https://blog.csdn.net/m0_66722601/article/details/127243368

版权

工作积累专栏收录该内容

39 篇文章 1 订阅

订阅专栏

首先，建两个sass文件。如图：

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);
  }