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

2022/6/13 23:20:06

本文主要是介绍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() 函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程