快捷導(dǎo)航

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

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

本文主要介紹了Vue3?全局切換字體大小的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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)">?。?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'
}

常見問(wèn)題

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

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

您可能感興趣的文章:

相關(guān)文章

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