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() 函数的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-26React入门教程:从零开始搭建你的第一个React应用
- 2024-12-25Vue2入门教程:轻松掌握前端开发基础
- 2024-12-25Vue3入门指南:快速搭建你的第一个Vue3项目
- 2024-12-25JS基础知识入门教程
- 2024-12-25React基础知识详解:从入门到初级应用
- 2024-12-25Vue3基础知识详解与实战指南
- 2024-12-25Vue3学习:从入门到初步掌握
- 2024-12-25Vue3入门:新手必读的简单教程
- 2024-12-23【JS逆向百例】爱疯官网登录逆向分析
- 2024-12-21Vue3教程:新手入门到实践应用