el-carousel 设置高度

### 如何设置 `el-carousel` 的自定义高度 在 Element UI 中，可以通过覆盖默认样式来调整组件的高度。对于 `el-carousel` 组件，可以利用 CSS 深度选择器 `/deep/` 或者 `::v-deep` 来修改内部子元素的样式。 以下是实现方法的具体说明： #### 使用深度选择器修改 `el-carousel` 高度 通过以下代码片段，可以直接设置 `.el-carousel__item` 和 `.el-carousel` 的高度属性[^1]。 ```css /deep/ .el-carousel { height: 400px; /* 设置整个走马灯容器的高度 */ } /deep/ .el-carousel__container { height: 400px; /* 确保轮播图的内容区域也同步调整高度 */ } /deep/ .el-carousel__item { height: 100%; /* 让每个轮播项占满父级容器的高度 */ } ``` 如果项目中启用了 Scoped CSS，则需要使用 `::v-deep` 替代 `/deep/`，如下所示： ```css ::v-deep .el-carousel { height: 400px; } ::v-deep .el-carousel__container { height: 400px; } ::v-deep .el-carousel__item { height: 100%; } ``` #### 在 JavaScript 文件中确认 Element UI 已正确加载 为了确保上述样式生效，需验证 Element UI 是否已在项目中正确初始化。通常情况下，在项目的入口文件（如 `main.js`）中完成配置即可[^2]。 ```javascript import Vue from 'vue'; import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); ``` 以上代码会全局注册 Element UI 并应用默认主题样式表。 #### 完整示例代码 下面是一个完整的 HTML 结构和对应的样式代码，用于展示如何设置 `el-carousel` 自定义高度。 ```html <template> <div class="carousel-container"> <el-carousel :interval="5000" arrow="always"> <el-carousel-item v-for="(item, index) in items" :key="index"> <h3>{{ item.title }}</h3> </el-carousel-item> </el-carousel> </div> </template> <script> export default { data() { return { items: [ { title: "Slide 1" }, { title: "Slide 2" }, { title: "Slide 3" } ] }; } }; </script> <style scoped> .carousel-container ::v-deep .el-carousel { height: 400px; } .carousel-container ::v-deep .el-carousel__container { height: 400px; } .carousel-container ::v-deep .el-carousel__item { display: flex; justify-content: center; align-items: center; height: 100%; background-color: #ccc; } .carousel-container ::v-deep .el-carousel__item h3 { color: white; font-size: 20px; } </style> ``` --- ### 注意事项 - 如果未启用 Scoped CSS，则无需使用 `::v-deep` 或 `/deep/`。 - 修改高度时应同时调整 `.el-carousel`, `.el-carousel__container` 及 `.el-carousel__item` 的高度，以保持一致性。 ---