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表头“固定定位”的效果！

 

脚踏实地行，海阔天空飞