标签：技术分享 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); }
基本就这些了。如果有不对的地方或者可以改进的地方，欢迎指正！
标签：技术分享 attribute vue include 点击 ima 改变 指正 自己
原文地址：https://www.cnblogs.com/xhc123/p/10132963.html
