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

<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)  })}

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

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

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