Vue 动态设置系统字体

前言

在项目优化过程中，实现了主体色替换功能，接下来考虑实现系统字体设置，主要提供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进阶（幺柒零）：前端用户体验提升（四）应用rem/em实现字体自适应》
• 《Vue进阶（幺陆捌）：前端用户体验提升（三）应用vw/vh实现自定义布局》