系统大小号样式切换

前言

提示：系统可以切换整体，大中小号样式！

一、[Html的body中绑定 fontSize-style 属性

fontSize-style 属性= localStroge.fontSize

<nz-layout class="h-100" [ngClass]="{'small': fontSize=='small','middle': fontSize=='middle','large': fontSize=='large'}">
</nz-layout>

public get fontSize(): string {
    return localStorage.getItem("fontSize");
  }

二、[windows监听localStorage. fontSize属性改变

三、[更改body中 fontSize-style 属性

body.setAttribute(‘fontsize-style’, this.fontSize).

 ngOnInit() {
    //渲染菜单
    this.powerMenuData = JSON.parse(localStorage.getItem("powerMenu"));
    this.title = this.apiService.title;
    this.titleService.setTitle(this.apiService.title);

    // 设置body中 fontSize-style 属性== localStroge.fontSize
    const body = document.getElementsByTagName('body')[0];
    body.setAttribute('fontsize-style', this.fontSize);

    // 设置监听localStorage.setItem事件改变
    const orignalSetItem = localStorage.setItem;　// 原始的setItem方法
    localStorage.setItem = function (key, newValue) {
      const setItemEvent = new Event('setItemEvent');
      setItemEvent[key] = newValue; // 保存设置的值
      orignalSetItem.apply(this, arguments);　// 调用原始的setItem方法
      window.dispatchEvent(setItemEvent); // 派发该事件
    };
    window.addEventListener('setItemEvent', (e) => {
      // 设置body中 fontSize-style 属性
      const body = document.getElementsByTagName('body')[0];
      body.setAttribute('fontsize-style', this.fontSize);
      // console.log(body);
    });
  }