字体大小统一解决方案

第一部分（字体切换大小的逻辑实现）

第一步、在src的目录下找到assets文件里面的的css文件夹，创建全局的variable.scss文件，并在文件中声明css变量

$fontSize: var(--size, 1);

第二步、在状态机中声明字号大小，并赋值默认的大小

const state = {    
fontSize: 1 // 0： 0.8 '超小字体',1：0.9 '小号字体', 2：1 '标准字体', 3：1.2 '中号字体',4： 1.4 '大号字体', 5：1.6 '超大号字体
}

第三步、在状态机的mutations里面写入更改fontSize的函数，并储存

    //字体大小
    SET_FONT_SIZE: (state, data) => {
        state.fontSize = data;
        sessionStorage.setItem('fontSize', data);
    },

第四步、在状态机的getters中得到更改后的fontSize

    getSize: (state) => {
        // 字体大小 - 持久化
        state.user.fontSize = sessionStorage.getItem('fontSize');
        if (state.user.fontSize != undefined) {
            return state.user.fontSize;
        }
    },

fontSize: 2 // 字体大小,0。代表超小，1。代表小。2。代表标准。3.代表中号，4.代表大号，5.代表超大号

第五步、在Header.vue中引入状态机文件并得到getSize

   import { mapGetters } from 'vuex';

 computed: {
        // 字体大小
        ...mapGetters(['getSize']),}

引入之后，这里可以用this.getSize的值

第六步、在Header.vue中写入字体切换大小的函数 

1）.Html部分

<template>
     <el-dropdown-item>                      
                            <div class="Font-select">
                                <div class="aboutTheLayout">
                                    <span class="left">A</span><span class="showText" ref="showText"></span><span class="right">A</span>
                                </div>
                                <el-slider
                                    v-model="value"
                                    @change="ChangeFont($event)"
                                    :step="20"
                                    :show-stops="false"
                                    :show-tooltip="false"
                                >
                                </el-slider>
                            </div>
      </el-dropdown-item>
</template>

2）.Html的效果

3).js代码部分

data（）{
return {
 value: 40
}
   mounted() {
    
        this.ChangeFont();
    },
methods:{
ChangeFont(e = 40) {
            // 拿到e的值后除以20然后赋值给FontSize;
            let FontSize = e / 20;
            // 更改状态机里面的fontSize的值
            if (FontSize != undefined && FontSize != null && FontSize != NaN) {
                this.$store.commit('user/SET_FONT_SIZE', FontSize);
            }
            // 定义一个对象，里面存放不同的字体大小和对应的文字
            const fontSizes = {
                '0': { size: 0.8, text: '超小字体' },
                '1': { size: 0.9, text: '小号字体' },
                '2': { size: 1, text: '标准字体' },
                '3': { size: 1.2, text: '中号字体' },
                '4': { size: 1.4, text: '大号字体' },
                '5': { size: 1.6, text: '超大号字体' }
            };
            // 判断FontSize是否在fontSizes里面，如果在就执行下面的代码
            if (FontSize in fontSizes) {
                // 拿到对应的字体大小和文字
                const { size, text } = fontSizes[FontSize];
                this.$nextTick(() => {
                    // 把对应的字体大小赋值给body的font-size
                    document.getElementsByTagName('body')[0].style.setProperty('--size', size);
                    // 把对应的文字赋值给showText
                    this.$refs.showText.innerText = text;
                });
            }
        }
}

第七步、在页面or其它组件中使用

1）、页面中的样式部分首先引入variable.scss

@import "@/assets/css/global/variable.scss"

2）、在需要设置font-size的地方写上font-size: calc(14px * #{$fontSize});

（公用样式的提取与绑定）

说明：把公用样式分门别类写在不同的类型文件之后，在使用时，直接绑定class类名就可以嘞，极大的减少了组件或页面的代码行数

第一步

在src的目录下找到assets文件里面的的css文件夹在里面创建公共的按钮样式+表格样式+树形菜单样式文件然后在这些文件中写上样式属性

第二步

在已经挂载到全局的global.scss文件中引入创建好的按钮样式+表格样式+树形菜单样式文件

第三步

组件中使用