Vue3?全局切換字體大小的實現(xiàn)

更新時間：2024年03月05日 08:32:45 作者：小秀_heo

本文主要介紹了Vue3?全局切換字體大小的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

<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'
}

常見問題

發(fā)現(xiàn)刷新后失效，此時我們可以保留修改到localStorage中。如果想要全局修改顏色，底層也是一樣的道理。

到此這篇關(guān)于Vue3 全局切換字體大小的實現(xiàn)的文章就介紹到這了,更多相關(guān)Vue3 全局切換字體大小內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

如何在Vue中實現(xiàn)Svelte的Defer Transition
這篇文章主要介紹了如何在Vue中實現(xiàn)Svelte的Defer Transition，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下
2021-04-04
Vue多系統(tǒng)切換實現(xiàn)方案
本篇文章給大家分享了關(guān)于Vue多系統(tǒng)切換實現(xiàn)的解決方案，對此有需要的朋友可以跟著參考學(xué)習(xí)下。
2018-06-06
Vue圖片裁剪組件實例代碼
這篇文章主要給大家介紹了關(guān)于Vue圖片裁剪組件的相關(guān)資料,本文介紹的組件是基于vue-cropper二次封裝,vue-cropper大家應(yīng)該都很熟悉了吧,需要的朋友可以參考下
2021-07-07
Vue項目中使用fontawesome圖標(biāo)庫的方法
fontawesome的圖標(biāo)有免費版和專業(yè)版,本文主要使用free版本,一般free版本的圖標(biāo)夠用,free圖標(biāo)又劃分為三個圖標(biāo)庫,主要有實心圖標(biāo)solid、常規(guī)圖標(biāo)regular及品牌圖標(biāo)brand,根據(jù)需求去下載對應(yīng)的圖標(biāo)庫,無須全部下載,對vue?fontawesome圖標(biāo)庫相關(guān)知識感興趣的朋友一起看看吧
2023-12-12
在vue中嵌入外部網(wǎng)站的實現(xiàn)
這篇文章主要介紹了在vue中嵌入外部網(wǎng)站的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
Vue腳手架編寫試卷頁面功能
腳手架是一種用于快速開發(fā)Vue項目的系統(tǒng)架構(gòu)，這篇文章主要介紹了Vue腳手架實現(xiàn)試卷頁面功能，通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
2020-03-03
vue滾動軸插件better-scroll使用詳解
這篇文章主要為大家詳細介紹了vue滾動軸插件better-scroll的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
vue具名插槽的基本使用實例
Vue 中的插槽在開發(fā)組件的過程中其實是非常重要并且好用的。下面這篇文章主要給大家介紹了關(guān)于vue具名插槽基本使用的相關(guān)資料，需要的朋友可以參考下
2021-05-05
v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案
在使用 elementui 表單的過程中,某些表單項需要通過 v-if 來判斷是否展示,但是這些表單項出現(xiàn)了檢驗失效的問題,今天小編給大家介紹v-if 導(dǎo)致 elementui 表單校驗失效問題解決方案,感興趣的朋友一起看看吧
2024-01-01
vue3.0如何在全局掛載對象和方法
這篇文章主要介紹了vue3.0如何在全局掛載對象和方法，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-04-04