vue2在css中使用js變量

本篇將實現vue2在css中使用js變量。

下圖是el-tab組件，由上面的tab頭和下面的內容區構成，當內容區過長的時候，外層固定高度的盒子會出現滾動條（設置了overflow: auto;），tab頭部會向上滾動而消失：

滾動前：

 

滾動后：

 

 

 現在的需求是，tab頭部需要固定在最上方，不隨滾動條滾動而消失。

首先嘗試將tab頭用固定定位，加上背景色和z-index層級，已經實現懸浮固定，但是長度不夠，只能蓋住“特殊指示”旁邊一點，空出來一大截。加上width: 100%又超長，由於組件的一層層嵌套以及element ui組件，樣式改了半天，無法實現寬度百分百覆蓋。。。(可能跟我css功底太淺有關)

另辟蹊徑，將外層盒子的overflow: auto改為overflow: hidden（關閉最外層的滾動條），內容區類名：.el-tabs__content，在這里面更改內容區的樣式：

>>>.el-tabs__content{
  height: 500px;
  overflow: auto!important; //使用內容區的滾動條，從而保證tab頭部保持不動
}

這樣tab頭部保持不動，下面的內容區出現高度為500px的滾動條，初步實現內容區滾動，頭部不動。問題來了：該頁面是自適應頁面，高度是動態變化的，這里寫500px顯然不太合適，因此在這里css就需要用到變量了，該變量會隨着頁面高度變化而變化。下面實現在css中使用變量：

>>>.el-tabs__content{
  /*自定義的變量 --color*/
  --color: red;
  height: 500px;
  overflow: auto!important;
  /*用var(變量)使用已經定義的變量*/
  color: var(--color); 
}

效果：

 

 

 自定義的變量--color已經生效！但此時的--color還是靜態的，無法給其賦上js的變量，為了將js動態生成的樣式的值傳給css屬性，可以借助vue中的computed。

computed:{
  cssVar(){
    return {
      '--height': document.documentElement.clientHeight-300 + 'px'
    }
  },  
}

 

 

 這里利用計算屬性，將動態的--height添加到最外層的盒子上，這樣在內層的.el-tabs__content可以使用--height這個變量，用這樣的方式，模擬了el-tab表頭“固定定位”的效果！

 

腳踏實地行，海闊天空飛