Vue3?全局切換字體大小的實現(xiàn)
更新時間：2024年03月05日 08:32:45 作者：小秀_heo
本文主要介紹了Vue3?全局切換字體大小的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
先安裝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)">?。?2）</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'
}
常見問題
發(fā)現(xiàn)刷新后失效，此時我們可以保留修改到localStorage中。如果想要全局修改顏色，底層也是一樣的道理。
到此這篇關(guān)于Vue3 全局切換字體大小的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 全局切換字體大小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)
這篇文章主要介紹了vue?element-ui動態(tài)橫向統(tǒng)計表格的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue 組件事件觸發(fā)和監(jiān)聽實現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue 組件事件觸發(fā)和監(jiān)聽實現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家介紹了vue3.2?Composition?API項目依賴升級示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
自定義指令是 vue 中使用頻率僅次于組件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五個生命周期鉤子，接下來通過本文給大家詳細介紹Vue指令工作原理實現(xiàn)方法，需要的朋友參考下吧2021-06-06
ECharts是一個強大的畫圖插件，在vue項目中，我們常?？梢砸肊charts來完成完成一些圖表的繪制，本文就來和大家介紹一下如何在Vue項目中引入ECharts吧2023-03-03
這篇文章主要介紹了三種方式解決vue中v-html元素中標簽樣式，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
這篇文章主要介紹了vue導入新工程?“node_modules依賴”問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-07-07
provide和inject在Vue 2中已經(jīng)被廣泛應用，不是新鮮API，3.0重新認識一下它們兩個，本文重點給大家介紹vue3中provide和inject的使用，需要的朋友參考下吧2021-07-07
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)2022-12-12