一、內(nèi)容簡(jiǎn)介

在使用vue開發(fā)時(shí)，經(jīng)常會(huì)封裝很多的組件方便復(fù)用，那么難免就有寫樣式相關(guān)組件，比如需要使用時(shí)傳入顏色、高度等樣式參數(shù)。

那么問題來了：我們要怎么在樣式中使用組件中接收的參數(shù)呢?或者說，我們要怎么在樣式中使用data中的變量呢?

二、代碼演示

這個(gè)用法真的簡(jiǎn)單，沒什么其他的知識(shí)點(diǎn)，直接上代碼：

<template> 
  <div class="box" :style="styleVar"> 
  </div> 
</template> 
<script> 
export default { 
  props: { 
    height: { 
      type: Number, 
      default: 54, 
    }, 
  }, 
  computed: { 
    styleVar() { 
      return { 
        '--box-height': this.height + 'px' 
      } 
    } 
  }, 
} 
</script> 
<style scoped> 
.box { 
  height: var(--box-height); 
} 
</style> 

這樣我們就在vue中實(shí)現(xiàn)了在樣式里使用js變量的方法：

及通過css定義變量的方式，將變量在行內(nèi)注入，然后在style中使用var()獲取我們?cè)谛袃?nèi)設(shè)置的數(shù)據(jù)即可。

三、最后

以后，在封裝一些需要?jiǎng)討B(tài)傳入樣式參數(shù)的ui組件是不是簡(jiǎn)便了不少。你學(xué)會(huì)了么?趕快在項(xiàng)目中嘗試一下吧～～