Javascript

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

本文主要是介绍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 可选。回退值（在自定义属性无效时使用）。

 

这篇关于vue 动态改变element ui 的css Var() 函数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航