快捷導(dǎo)航

Vue如何使用CSS自定義變量

更新時(shí)間：2021年05月08日 14:39:15 作者：四路閑人

這篇文章主要介紹了Vue如何使用CSS自定義變量，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

在 css 自定義變量的功能以及出來許久了，但實(shí)際開發(fā)中大家使用并不多。歸其原因是因?yàn)?less、sass 等預(yù)處理器已經(jīng)擁有定義變量的功能，以及Vue、react很方便設(shè)置 style 樣式，大家可能覺得使用 css 定義變量不方便且沒必要。實(shí)則不然舉個(gè)最直觀的栗子：“如何使用 vue 設(shè)置偽類偽元素的樣式”。這是個(gè)世紀(jì)難題，大部分人可能會(huì)通過修改類名的方式解決，可如果要修改的樣式多，或者我想通過不同的數(shù)據(jù)渲染不同的樣式，那該怎么辦呢？今天我就來直接解決這個(gè)問題。先來了解什么是 css 自定義變量。簡(jiǎn)單使用：

<style>
div {
    --bg-color : pink; //定義變量
    color : var( --bg-color ) // 通過var函數(shù)使用變量
}
</style>
<div>hello</div>

你將會(huì)得到一個(gè)粉色的hello。在父級(jí)定義的變量也可以讓子級(jí)及其偽類偽元素使用。

<style>
div {
    --bg-color : pink; //定義變量
    color : var( --bg-color ); // 通過var函數(shù)使用變量
}
div:hover {
    background-color : var( --bg-color );
}
div span {
    background-color : var( --bg-color );
}
</style>
<div>hello <span>world</span> </div>

var 函數(shù)還可以設(shè)置一個(gè)默認(rèn)值，當(dāng)查找不到自定義變量時(shí)，你還可以設(shè)置一個(gè)默認(rèn)值。

<style>
div {
    color : var( --bg-color, pink ); // 第二個(gè)參數(shù)為默認(rèn)值
    background-color : var( --bg-color ,--color,--a,red );// 你甚至可以設(shè)置多個(gè)變量，它從左到右依次查找
}
</style>
<div>hello</div>

到此為止 css 自定義變量就介紹的完了。接下來看看它在 vue 中的使用。你可以在標(biāo)簽的 style 屬性里面設(shè)置其變量的值。

<template>
	<div class="box" @click="changeColor" :style="{'--a' : a}">hello</div>
</template>
export default {
  data(){
    return {
      a : 'blue',
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
    }
  }
}
</script>
<style>
  .box {
      color : var(--a);
  }
  .box:hover {
    background-color : var(--a);
  }
</style>

點(diǎn)擊 div 它的字體顏色以及其 hover 時(shí)的背景顏色將會(huì)直接改變。在此時(shí)你會(huì)發(fā)現(xiàn)通過自定義 css 變量，可以很方便的修改其樣式以及可以直接修改其偽類的屬性。由于子元素可以共享父元素的自定義變量，你可以直接在子組件中直接使用父自己的變量。

// 父組件
<template>
	<div class="box"  :style="{'--a' : a}">hello <Child></Child></div>
</template>
export default {
  components : {
      Child
  },
  data(){
    return {
      a : 'blue',
    }
  }
}
</script>

// 子組件 Child
<template>
  <span>world</span>
</template>

<style lang="less">
  span {
      color : var(--color);
  }
</style>

試驗(yàn)一下效果非常的 amazing ,這樣我們可以在父組件修改狀態(tài)來改變子組件的樣式，繞過了子父組件傳值。注意：子組件必須要在變量能作用到的范圍類掛載才行。

上述栗子中可以看出，子定義變量的方便之處。為來跟為方便的使用你可以通過 vue 自定義指令的方式設(shè)置變量。

   // vue3 自定義指令。
      function change(el,binding){
        for(let [key,value] of Object.entries(binding.value)){
            el.style.setProperty('--'+key, value);
        }
    }
  app.directive(css, {
        mounted(el,binding){
            change(el,binding)
        }
        updated(el, binding) {
            change(el,binding)
        }
       
    })

注意修改css變量使用 el.style['--color'] = 'red' 是無效的，必須得用 style.setProperty api設(shè)置。注冊(cè)好指令后我們可以。

<template>
	<div v-css="{a,b}" class="box" @click="changeColor"></div>
</template>
export default {
  data(){
    return {
      a : 'blue',
      b : 'pink'
    }
  },
  methods: {
    changeColor(){
      this.a = this.a === 'blue' ? "red" : "blue"
      this.b = this.b === 'pink' ? "yellow" : "pink"
    }
  }
}
</script>
<style>
  .box {
    width : 100px;
    height : 100px;
    background-color : var(--a);
  }
  .box:hover {
    background-color : var(--b);
  }
</style>

極大的方便了vue 對(duì)于 style 樣式的操作。

我在此基礎(chǔ)上進(jìn)行了一些優(yōu)化及擴(kuò)展，開源了一個(gè)工具，已發(fā)布在 npm 上。地址www.npmjs.com/package/vue… 。歡迎大家多多下載體驗(yàn)，喜歡也可以 star 哦。

以上就是Vue如何使用CSS自定義變量的詳細(xì)內(nèi)容，更多關(guān)于Vue 使用CSS自定義變量的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: