vue+sass实现切换字体大小

Posted 2021-01-28 xhc123

接到领导指示，用户嫌我做的页面字体太小，15px的字体叫小？领导说用户多是上了年纪的人。没办法，改吧，谁让咱是个搬砖的呢。。咳咳

我寻思着这次改大了，下次用户嫌大再让改小呢？干脆给他做个选择字号的功能，让他自己选。我真是个机智的人啊，哈哈哈！

可是，问题来了，怎么才能动态改变页面字体大小呢？我陷入了沉（搜）思（索）。

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

variable.scss文件代码如下：

// 存放变量
$font_size_14:14px;
$font_size_15:15px;
$font_size_16:16px;

mixin.scss文件代码如下：

@charset "utf-8";
@import "./variable"; // 引入变量
@mixin add-size($size){
  font-size: $size;
  [data-size="0"] & {
    font-size:$font_size_14;
  }
  [data-size="1"] & {
    font-size:$font_size_15;
  }
  [data-size="2"] & {
    font-size:$font_size_16;
  }
}

最后，就是在组件里面使用了。

先给用户提供几个选项可以选择。如图

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

基本就这些了。如果有不对的地方或者可以改进的地方，欢迎指正！