【Vue3】全局切换字体大小

VueUse

先安装VueUse

<template><header><div class="left">left</div><div class="center">center</div><div class="right">right</div></header><div><button @click="changeSize(36)">大(36)</button><button @click="changeSize(24)">中(24)</button><button @click="changeSize(12)">小(12)</button></div>
</template><script setup lang="ts">
import { useCssVar } from '@vueuse/core'
const changeSize = (number:number) => {const size = useCssVar('--size')size.value = number + 'px'
}
</script><style scoped lang="less">
:root {--size: 12px;
}
header {display: flex;.left {width: 100px;height: 50px;font-size:  var(--size);background: lightblue;}.center {flex: 1;height: 50px;font-size:  var(--size);background: lightcoral;}.right {width: 100px;height: 50px;font-size:  var(--size);background: lightgoldenrodyellow;}
}
</style>

在这里插入图片描述

底层原理

const changeSize = (number:number) => {document.documentElement.style.setProperty('--size',number + 'px')// document.documentElement.style.getPropertyValue('--size')// const size = useCssVar('--size')// size.value = number + 'px'
}

常见问题

发现刷新后失效,此时我们可以保留修改到localStorage中。如果想要全局修改颜色,底层也是一样的道理。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/716242.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

飞天使-学以致用-devops知识点4-SpringBoot项目CICD实现(实验失败,了解大概流程)

文章目录 代码准备创建jenkins 任务测试推送使用项目里面的jenkinsfile 进行升级操作 文字版本流程项目构建 代码准备 推送代码到gitlab 代码去叩叮狼教育找 k8s 创建jenkins 任务 创建一个k8s-cicd-demo 流水线任务 将jenkins 里面构建时候的地址还有token&#xff0c; 给到…

azure devops工具实践分析

对azure devops此工具的功能深挖&#xff0c;结合jira的使用经验的分析 1、在backlog的功能描述&#xff0c;可理解为需求项&#xff0c;这里包括了bug&#xff0c;从开发的角度修复bug也是个工作项&#xff0c;所以需求的范围是真正的需求&#xff08;开发接收到的已经确认的…

已解决org.springframework.web.multipart.MultipartException处理多部分请求异常的正确解决方法,亲测有效!!!

已解决org.springframework.web.multipart.MultipartException处理多部分请求异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 目录 问题分析 出现问题的场景 报错原因 解决思路 解决方法 总结 在Web开发过程中&#xff0c;我们经常需要处…

基于JAVA协同过滤算法网上海鲜水产推荐购物商城系统设计与实现(Springboot框架)可行性分析

博主介绍&#xff1a;黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者&#xff0c;CSDN博客专家&#xff0c;在线教育专家&#xff0c;CSDN钻石讲师&#xff1b;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程&#xff…

【PDF技巧】网上下载的pdf文件怎么才能编辑

不知道大家有没有遇到过网上下载的PDF文件不能编辑的情况&#xff0c;今天我们来详细了解一下导致无法编辑的原因即解决方法有哪些。 第一种原因&#xff1a;PDF文件中的内容是否是图片&#xff0c;如果确认是图片文件&#xff0c;那么我们想要编辑&#xff0c;就可以先使用PD…

分享经典、现代以及前沿软件工程课程

https://www.icourse163.org/course/PKU-1003177002 随着信息技术的发展&#xff0c;软件已经深入到人类社会生产和生活的各个方面。软件工程是将工程化的方法运用到软件的开发、运行和维护之中&#xff0c;以达到提高软件质量&#xff0c;降低开发成本的目的。软件工程已经成为…

第三方支付牌照出让,具备何种优势的买方容易成功

在支付牌照并购的过程中&#xff0c;选择一个合适的并购方是至关重要的。基于多年的支付牌照公司股权并购居间经验&#xff0c;我发现具备以下特质的并购方在并购过程中表现得较为靠谱&#xff0c;他们不仅使得并购过程更为顺畅&#xff0c;还能显著提高并购的成功率。 并购方…

字符函数和字符串函数(下)

个人主页&#xff08;找往期文章包括但不限于本期文章中不懂的知识点&#xff09;&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 目录 strncpy函数的使用 函数原型&#xff1a; strncpy的使用 strncat函数的使用 函数原型&#xff1a; strncat的使用 strncmp函数的使用 函…

Vue3快速上手(十六)Vue3路由传参大全

Vue3路由传参 一、传参的多种方式 1.1 拼接方式 这种方式适合传递单个参数的情况&#xff0c;比如点击查看详情&#xff0c;传个id这样的场景 传参&#xff1a; <RouterLink to"/person?id1" active-class"active">person</RouterLink> …

Unity - 相机画面为黑白效果

一、 在Hierarchy中创建一个Global Volume,并设置它为局部作用 二、 将场景出现的作用域范围缩小至相机所在位置&#xff0c;将相机包含即可。 三、添加覆盖组件Color Adjustments,并将Saturation直接拉为-100 。 此时&#xff0c;相机拍摄画面为黑白&#xff0c;场景视图中…

1、Linux-安装

一、Linux和Windows的一些区别 1、Linux严格区分大小写——【Windows创建文件夹时不区分大小写】 2、Linux中所有内容都以文件形式存储&#xff0c;包括硬件 3、Linux不靠拓展名区分文件类型&#xff0c;而是可以通过读取文件开头的一些字节来区分。 但是在实际使用中一般要…

MYSQL---日志

1.日志的概述 日志是MySQL数据库的重要组成部分。日志文件中记录着MySQL数据库运行期间发生的变化&#xff1b;也就是说用来记录MySQL数据库的客户端连接状况、SQL语句的执行情况和错误信息等。当数据库遭到意外的损坏时&#xff0c;可以通过日志查看文件出错的原因&#xff0…

Leetcode算法题

用队列实现栈 用队列实现栈的四个操作&#xff1a; push(x)——元素x入栈pop()——移出栈顶元素top()——获取栈顶元素empty()——返回栈是否为空 注意&#xff1a; 只能使用队列的基本操作&#xff0c;即只可以调用队列的push to back&#xff0c;pop from front&#xff…

C语言中的字符魔法:大小写转换的艺术

引言 在C语言的世界里&#xff0c;字符处理是一项基础且重要的任务。字符作为编程中最基本的元素之一&#xff0c;承担着信息展示、数据交互等多重角色。特别是在处理文本信息时&#xff0c;字符的转换和识别显得尤为重要。大小写字母的转换就是其中一个常见的需求&#xff0c…

电子电气架构——汽车DoIP诊断通信建立流程

电子电气架构——汽车DoIP诊断通信建立流程 我是穿拖鞋的汉子,魔都中坚持长期主义的工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 人们会在生活中不断攻击你。他们的主要武器是向你灌输对自己的怀疑:你的价值、你的能力、你的潜力。他们往往会…

4款塞纸条盲盒交友源码,可以对接公众号

一元盲盒交友源码/脱单盲盒源码/交友盲盒/恋爱盲盒公众号版 可以对接自己支付&#xff0c;全部自定义 没有任何bug版本&#xff0c;已经测试完全可以 免费源码&#xff0c;不包搭建指导 源码下载地址专业知识分享社区-专业知识笔记免费分享 (chaobiji.cn)

华为OD机试 - 螺旋数字矩阵

1 题目描述 疫情期间&#xff0c;小明隔离在家&#xff0c;百无聊赖&#xff0c;在纸上写数字玩。他发明了一种写法&#xff1a; 给出数字个数 n &#xff08;0 < n ≤ 999&#xff09;和行数 m&#xff08;0 < m ≤ 999&#xff09;&#xff0c;从左上角的 1 开始&…

Globeland30米分辨率土地利用数据的下载

全国地理信息资源目录服务系统 先注册一下&#xff0c;登录 点击查询

Yolo不改包代码关闭控制台推理日志

在预测的参数列表里加上verboseFalse结即可关闭控制台输出日志 model.predict(sourcecolor_image,showTrue,verboseFalse)

国内chatgpt写作软件,chatgpt国内使用

随着人工智能技术的不断发展&#xff0c;国内涌现出了一些基于ChatGPT模型的写作软件&#xff0c;这些软件不仅能够实现智能化的文章写作&#xff0c;还支持批量生成各种类型的文章。本文将深入探讨国内ChatGPT写作软件&#xff0c;以及它们在批量文章创作方面的应用与优势。 C…