vue 动态改变element ui 的css Var() 函数

在vue中由于scoped的使用 [作用:CSS样式就只能作⽤于当前的组件，通过该属性，可以使得组件之间的样式不互相污染 ]

 

引⽤了第三⽅组件后，需要在组件中局部修改第三⽅组件的样式，⽽⼜不想去除scoped属性造成组件之间的样式污染。此时只能通过特殊
的⽅式，穿透scoped。

穿透的三种方式:　1. >>>  2./deep/ 3.::v-deep

我这里更改轮播图的高度 

/deep/ .el-carousel__container {
　　　height:85vh
}

 

此时已经可以改变高度；

现在需求:不同的方式展示不一样的高度； 需要动态控制height； 这时候可以使用var() 函数

 

css中

/deep/ .el-carousel__container {
　　height: var(--carousel-height);
}

template中

<el-carousel
　　:interval="playBackTime"
　　arrow="hover"
　　v-if="isPreview"
　　:style="{ '--carousel-height': height }"
>
    <el-carousel-item v-for="item in 3" :key="item">
     　<img/>
    </el-carousel-item>
</el-carousel>

js中 声明height变量在逻辑处更改即可

 

CSS 语法

var (custom-property-name, value)  

值	描述
custom-property-name	必需。自定义属性的名称（必须以两个破折号开头）。
value	可选。回退值（在自定义属性无效时使用）。