Vue3 全局切换字体大小的实现
作者：小秀_heo
本文主要介绍了Vue3 全局切换字体大小的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
先安装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中。如果想要全局修改颜色，底层也是一样的道理。
到此这篇关于Vue3 全局切换字体大小的实现的文章就介绍到这了,更多相关Vue3 全局切换字体大小内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！