Vue进阶（幺捌伍）：动态设置系统字体_微信字体动态设置大小vue怎么监听

2401_84618978

于 2024-05-16 14:55:59 发布

阅读量360

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84618978/article/details/138961652

版权

程序员专栏收录该内容

102 篇文章 0 订阅

订阅专栏

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

一、前言

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

三、涉及知识点

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

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