vue css自定义标签,Vue如何使用CSS自定义变量
目錄
在 css 自定義變量的功能以及出來許久了，但實際開發中大家使用并不多。歸其原因是因為 less、sass 等預處理器已經擁有定義變量的功能，以及Vue、react很方便設置 style 樣式，大家可能覺得使用 css 定義變量不方便且沒必要。實則不然舉個最直觀的栗子：“如何使用 vue 設置偽類偽元素的樣式”。這是個世紀難題，大部分人可能會通過修改類名的方式解決，可如果要修改的樣式多，或者我想通過不同的數據渲染不同的樣式，那該怎么辦呢？今天我就來直接解決這個問題。 先來了解什么是 css 自定義變量。 簡單使用：
div {
--bg-color : pink; //定義變量
color : var( --bg-color ) // 通過var函數使用變量
}
hello你將會得到一個粉色的hello。在父級定義的變量也可以讓子級及其偽類偽元素使用。
div {
--bg-color : pink; //定義變量
color : var( --bg-color ); // 通過var函數使用變量
}
div:hover {
background-color : var( --bg-color );
}
div span {
background-color : var( --bg-color );
}
hello worldvar 函數還可以設置一個默認值，當查找不到自定義變量時，你還可以設置一個默認值。
div {
color : var( --bg-color, pink ); // 第二個參數為默認值
background-color : var( --bg-color ,--color,--a,red );// 你甚至可以設置多個變量，它從左到右依次查找
}
hello到此為止 css 自定義變量就介紹的完了。接下來看看它在 vue 中的使用。你可以在標簽的 style 屬性里面設置其變量的值。
helloexport default {
data(){
return {
a : 'blue',
}
},
methods: {
changeColor(){
this.a = this.a === 'blue' ? "red" : "blue"
}
}
}
.box {
color : var(--a);
}
.box:hover {
background-color : var(--a);
}
點擊 div 它的字體顏色以及其 hover 時的背景顏色將會直接改變。在此時你會發現通過自定義 css 變量，可以很方便的修改其樣式以及可以直接修改其偽類的屬性。由于子元素可以共享父元素的自定義變量，你可以直接在子組件中直接使用父自己的變量。
// 父組件
helloexport default {
components : {
Child
},
data(){
return {
a : 'blue',
}
}
}
// 子組件 Child
world
span {
color : var(--color);
}
試驗一下效果非常的 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設置。注冊好指令后我們可以。
export default {
data(){
return {
a : 'blue',
b : 'pink'
}
},
methods: {
changeColor(){
this.a = this.a === 'blue' ? "red" : "blue"
this.b = this.b === 'pink' ? "yellow" : "pink"
}
}
}
.box {
width : 100px;
height : 100px;
background-color : var(--a);
}
.box:hover {
background-color : var(--b);
}
極大的方便了vue 對于 style 樣式的操作。
我在此基礎上進行了一些優化及擴展，開源了一個工具，已發布在 npm 上。地址www.npmjs.com/package/vue… 。歡迎大家多多下載體驗，喜歡也可以 star 哦。
以上就是Vue如何使用CSS自定義變量的詳細內容，更多關于Vue 使用CSS自定義變量的資料請關注腳本之家其它相關文章！
總結
以上是生活随笔為你收集整理的vue css自定义标签,Vue如何使用CSS自定义变量的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： gcASNotice.exe是什么进程
- 下一篇： html5倒计时秒杀怎么做,vue 设