Vue进阶（幺捌伍）：动态设置系统字体

野性酷女 2022-10-22 13:51 368阅读 0赞

## 前言 ##

在项目优化过程中，实现了主体色替换功能，接下来考虑实现系统字体设置，主要提供3种字体大小供用户选择。

## 实现思路 ##

<el-dropdown-menu style="color: #20a0ff" slot="dropdown">
        
        <el-dropdown-item divided style="display: flex; justify-content: space-around; width: 220px; padding-top: 10px;">
            主题色:
            <change-color></change-color>
          
          <el-button type="text" @click="resetSysColor" style="color: #409eff;">重置</el-button>
        </el-dropdown-item>
        <el-dropdown-item divided style="display: flex; justify-content: space-around; width: 240px; padding-top: 10px; margin-left: 33px;">
          系统字体:
          <el-radio-group v-model="sysFontSize" size="small" style="padding-left: 8px;" @change="changeSysConfig">
            <el-radio-button :label="1">小</el-radio-button>
            <el-radio-button :label="2">中</el-radio-button>
            <el-radio-button :label="3">大</el-radio-button>
          </el-radio-group>
          
          <el-button type="text" @click="resetSysFont" style="padding-left: 8px; color: #409eff;">重置</el-button>
        </el-dropdown-item>
      </el-dropdown-menu>
    
    import {  mapGetters } from 'vuex'
    import appConfig from '../../../config/app-config.js'
    
    export default { 
    data () { 
    	return { 
    		sysFontSize: '' // 系统字体
    	}
    },
    computed: { 
    	...mapGetters(['sysFont'])
    },
    watch: { 
    	sysFont (newVal) { 
    		document.querySelector('html').style.fontSize = this.sysFont+ 'px'
    		switch (this.sysFont) { 
    		  case '12':
    		    this.sysFontSize = 1
    		    break
    		  case '14':
    		    this.sysFontSize = 2
    		    break
    		  case '16':
    		    this.sysFontSize = 3
    		    break
    		}
    	}
    },
    // 重置系统主题色
    resetSysColor () { 
    	sessionStorage.removeItem('theme_color')
    	this.changeSysConfig()
    	location.reload()
    },
    // 重置系统字体
    resetSysFont () { 
    	sessionStorage.removeItem('theme_font')
    	this.sysFontSize = appConfig.themeFontSize
    	this.changeSysConfig(appConfig.themeFontSize)
    },
    // 更新系统主题色
    changeSysConfig (val) { 
    	let fontSize = 0
    	switch (val) { 
    	  case 1:
    	    fontSize = '12'
    	    break
    	  case 2:
    	    fontSize = '14'
    	    break
    	  case 3:
    	    fontSize = '16'
    	    break
    	}
    	document.querySelector('html').style.fontSize = fontSize + 'px'
    	let data = { 
    	  syscolor: curColor,
    	  sysfont: fontSize
    	}
    	// 每次开关状态更改，保存开关状态
    	updateSysConfig(JSON.stringify(data)).then((response) => { 
    	  changeThemeColor(curColor)
    	  sessionStorage.setItem('theme_font', fontSize)
    	})
    }

## 涉及知识点 ##

*  动态设置`html`根字体大小

document.querySelector('html').style.fontSize = fontSize + 'px'

*  若适配不同屏幕（随着设备屏幕的大小而变化，从而实现响应式），建议采用以下逻辑：

var html =document.querySelector('html');
     html.style.fontSize = document.documentElement.clientWidth/10+'px';

*  如果设置了根字体大小，`font-size`单位必须是`rem`。
 *  浏览器窗口更改后，监听屏幕尺寸变化逻辑如下：

window.onresize = () => { 
      let fontSize = window.innerWidth / 10
      fontSize = fontSize > 50 ? 50 : fontSize
      const html = document.querySelector('html')
      html.style.fontSize = fontSize + 'px'
    }

*  **`CSS` 属性 选择器;**
 *  **`calc()` 函数用于动态计算长度值;**

## 注 ##

若存在父子组件引用，且子组件中异步获取后台返回值，并通过`state`方式存储，在父组件中应通过`watch`实现获取存储在`state`中的数据。在钩子函数`mounted()`中是无法获取的，因为涉及到父子组件生命周期，父组件`mounted`之前，子组件尚未完成渲染，未获取后台返回值。

加载渲染过程如下：

> 父beforeCreate–> 父created–>父beforeMount–>子 beforeCreate–> 子 created–>子  
> beforeMount–>子 mounted–>父mounted

## 拓展阅读 ##

*  《[Vue进阶（幺零六）：子组件处理父组件异步值传递给子组件处理][Vue]》
 *  《[Vue进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应][Vue_rem_em]》
 *  《[Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局][Vue_vw_vh]》

[Vue]: https://shq5785.blog.csdn.net/article/details/105447960
[Vue_rem_em]: https://shq5785.blog.csdn.net/article/details/113986978
[Vue_vw_vh]: https://shq5785.blog.csdn.net/article/details/113987631