Vue 动态设置系统字体

举报
SHQ5785 发表于 2023/09/22 08:50:06 2023/09/22
【摘要】 前言在项目优化过程中,实现了主体色替换功能,接下来考虑实现系统字体设置,主要提供3种字体大小供用户选择。 实现思路<el-dropdown-menu style="color: #20a0ff" slot="dropdown"> <!--切换主题色--> <el-dropdown-item divided style="display: flex; justify-conten...

前言

在项目优化过程中,实现了主体色替换功能,接下来考虑实现系统字体设置,主要提供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

拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。