Vue前端一键修改字体大小

场景

在项目交付阶段，客户临时要求添加一个可以一键修改字体大小的功能（主要是针对表格内字体），由于之前架构没有设计这个功能点，所以我采用自己能想到的方法去解决这个问题
项目框架：vue2+Ant Design Vue组件库

思路

第一步：在头部导航组件添加修改字体大小的icon和方法
第二步：创建一个公共方法，获取导航组件点击选择的字体大小值，进行存储
第三步：切换不同页面，在生命周期updated()使用公共方法的字体大小

具体实现过程

第一步：头部导航组件的icon和方法添加

<div>
    <a-dropdown>
      <span v-if="isDesktop()" class="action ant-dropdown-link user-dropdown-menu">
        <img style="width: 22px;height: 22px;" src="@/assets/ziIcon.png"/>
        <span style="margin-left:4px">字体</span>
      </span>
      <a-menu slot="overlay" style="width: 80px;">
        <a-menu-item key="1" @click="bigfont">
          <span>大</span>
        </a-menu-item>
        <a-menu-item key="2" @click="smfont">
          <span>小</span>
        </a-menu-item>
      </a-menu>
    </a-dropdown>
   </div>
<script>
    methods: {
      bigfont(){
        let bodyDiv = document.getElementsByTagName("td")
        for(let item of bodyDiv){
          item.style.fontSize = "14px"
        }
        sessionStorage.setItem('fontS','14px')
        this.$forceUpdate()
      },
      smfont(){
        let bodyDiv = document.getElementsByTagName("td")
        for(let item of bodyDiv){
          item.style.fontSize = "12px"
        }
        sessionStorage.setItem('fontS','12px')
        this.$forceUpdate()
      }
    }
</script>

第二步：添加公共方法，并在main.js引入挂载到原型上
1.公共js如下：

  function  mren(){
      //如果未发现字体大小的存储值，直接return，不做任何的多余操作
      if(sessionStorage.getItem('fontS') == undefined || sessionStorage.getItem('fontS') == null){
        return
      }
      let bodyDiv = document.getElementsByTagName("td")
      for(let item of bodyDiv){
        item.style.fontSize = sessionStorage.getItem('fontS')
      }
    }
export default {
 mren
}

2.在main.js中引入并挂载

import fontChange from'@/mixins/fontChange.js'
Vue.prototype.fontChange = fontChange

第三步：其他页面组件进行使用

updated(){
      this.fontChange.mren()
    },

效果如下：

小结

类似于这种一键调整字体大小，一键调整页面颜色，一键调整页面布局等，尽量在项目架构之初就和客户进行敲定，防止后面忽然客户需要，导致猝不及防。
此示例，主要针对表格内字体大小进行调整！！！
此示例，主要针对表格内字体大小进行调整！！！
此示例，主要针对表格内字体大小进行调整！！！