码迷,mamicode.com
首页 > 其他好文 > 详细

vue+sass实现切换字体大小

时间:2018-12-17 19:01:11      阅读:2507      评论:0      收藏:0      [点我收藏+]

标签:技术分享   attribute   vue   include   点击   ima   改变   指正   自己   

接到领导指示,用户嫌我做的页面字体太小,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实现切换字体大小

标签:技术分享   attribute   vue   include   点击   ima   改变   指正   自己   

原文地址:https://www.cnblogs.com/xhc123/p/10132963.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!