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

2022-06-13 20:35:32 阅读：172 来源： 互联网

标签：vue scoped deep height var ui carousel 组件 element

在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,scoped,deep,height,var,ui,carousel,组件,element
来源： https://www.cnblogs.com/chen-yi-yi/p/16372207.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

CSS 语法