vue+sass实现切换字体大小

Posted xhc123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue+sass实现切换字体大小相关的知识,希望对你有一定的参考价值。

接到领导指示,用户嫌我做的页面字体太小,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);
  }

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

 



以上是关于vue+sass实现切换字体大小的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Bootstrap 4 中使用 Sass 更改字体大小?

scss Sass - Mixins:Rem字体大小

VUE element-ui 字体文件偶尔乱码

scss Sass mixin用于设置默认rem字体大小

Pycharm怎样设置代码字体大小和颜色主题

Pycharm怎样设置代码字体大小和颜色主题