Vue如何使用CSS自定義變量
在 css 自定義變量的功能以及出來許久瞭,但實際開發中大傢使用並不多。歸其原因是因為 less、sass 等預處理器已經擁有定義變量的功能,以及Vue、react很方便設置 style 樣式,大傢可能覺得使用 css 定義變量不方便且沒必要。實則不然舉個最直觀的栗子:“如何使用 vue 設置偽類偽元素的樣式”。這是個世紀難題,大部分人可能會通過修改類名的方式解決,可如果要修改的樣式多,或者我想通過不同的數據渲染不同的樣式,那該怎麼辦呢?今天我就來直接解決這個問題。 先來瞭解什麼是 css 自定義變量。 簡單使用:
<style> div { --bg-color : pink; //定義變量 color : var( --bg-color ) // 通過var函數使用變量 } </style> <div>hello</div>
你將會得到一個粉色的hello。在父級定義的變量也可以讓子級及其偽類偽元素使用。
<style> div { --bg-color : pink; //定義變量 color : var( --bg-color ); // 通過var函數使用變量 } div:hover { background-color : var( --bg-color ); } div span { background-color : var( --bg-color ); } </style> <div>hello <span>world</span> </div>
var 函數還可以設置一個默認值,當查找不到自定義變量時,你還可以設置一個默認值。
<style> div { color : var( --bg-color, pink ); // 第二個參數為默認值 background-color : var( --bg-color ,--color,--a,red );// 你甚至可以設置多個變量,它從左到右依次查找 } </style> <div>hello</div>
到此為止 css 自定義變量就介紹的完瞭。接下來看看它在 vue 中的使用。你可以在標簽的 style 屬性裡面設置其變量的值。
<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>
點擊 div 它的字體顏色以及其 hover 時的背景顏色將會直接改變。在此時你會發現通過自定義 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>
試驗一下效果非常的 amazing ,這樣我們可以在父組件修改狀態來改變子組件的樣式,繞過瞭子父組件傳值。註意:子組件必須要在變量能作用到的范圍類掛載才行。
上述栗子中可以看出,子定義變量的方便之處。為來跟為方便的使用你可以通過 vue 自定義指令的方式設置變量。
// 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設置。註冊好指令後我們可以。
<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 對於 style 樣式的操作。
我在此基礎上進行瞭一些優化及擴展,開源瞭一個工具,已發佈在 npm 上。地址www.npmjs.com/package/vue… 。歡迎大傢多多下載體驗,喜歡也可以 star 哦。
以上就是Vue如何使用CSS自定義變量的詳細內容,更多關於Vue 使用CSS自定義變量的資料請關註WalkonNet其它相關文章!