快捷導(dǎo)航

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

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

本文主要介紹了Vue3?全局切換字體大小的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(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)刷新后失效，此時(shí)我們可以保留修改到localStorage中。如果想要全局修改顏色，底層也是一樣的道理。

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

您可能感興趣的文章:

相關(guān)文章

vue?element-ui動(dòng)態(tài)橫向統(tǒng)計(jì)表格的實(shí)現(xiàn)
這篇文章主要介紹了vue?element-ui動(dòng)態(tài)橫向統(tǒng)計(jì)表格的實(shí)現(xiàn)方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue 組件事件觸發(fā)和監(jiān)聽實(shí)現(xiàn)源碼解析
這篇文章主要為大家介紹了Vue 組件事件觸發(fā)和監(jiān)聽實(shí)現(xiàn)源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-12-12
vue3.2?Composition?API項(xiàng)目依賴升級
這篇文章主要為大家介紹了vue3.2?Composition?API項(xiàng)目依賴升級示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
Vue指令工作原理實(shí)現(xiàn)方法
自定義指令是 vue 中使用頻率僅次于組件，其包含 bind 、 inserted 、 update 、 componentUpdated 、 unbind 五個(gè)生命周期鉤子，接下來通過本文給大家詳細(xì)介紹Vue指令工作原理實(shí)現(xiàn)方法，需要的朋友參考下吧
2021-06-06
Vue項(xiàng)目中引入ECharts的教程詳解
ECharts是一個(gè)強(qiáng)大的畫圖插件，在vue項(xiàng)目中，我們常?？梢砸肊charts來完成完成一些圖表的繪制，本文就來和大家介紹一下如何在Vue項(xiàng)目中引入ECharts吧
2023-03-03
詳解三種方式解決vue中v-html元素中標(biāo)簽樣式
這篇文章主要介紹了三種方式解決vue中v-html元素中標(biāo)簽樣式，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
vue導(dǎo)入新工程?“node_modules依賴”問題
這篇文章主要介紹了vue導(dǎo)入新工程?“node_modules依賴”問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
最全vue的vue-amap使用高德地圖插件畫多邊形范圍的示例代碼
這篇文章主要介紹了最全vue的vue-amap使用高德地圖插件畫多邊形范圍,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-07-07
vue3中provide和inject的使用
provide和inject在Vue 2中已經(jīng)被廣泛應(yīng)用，不是新鮮API，3.0重新認(rèn)識(shí)一下它們兩個(gè)，本文重點(diǎn)給大家介紹vue3中provide和inject的使用，需要的朋友參考下吧
2021-07-07
Vue組件通信之父傳子與子傳父深入探究
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實(shí)例的作用域是相互獨(dú)立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)
2022-12-12