一、內(nèi)容簡介

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

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

二、代碼演示

這個用法真的簡單，沒什么其他的知識點，直接上代碼：

<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中實現(xiàn)了在樣式里使用js變量的方法：

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

三、最后

以后，在封裝一些需要動態(tài)傳入樣式參數(shù)的ui組件是不是簡便了不少。你學會了么?趕快在項目中嘗試一下吧～～