Vue ElementUI el-carousel 走马灯指示灯样式修改

Carousel 走马灯

一、原始样式

二、修改后

三、代码

<template><div><el-carousel height="250px" ><el-carousel-item v-for="item in 4" :key="item"><h3 class="small">{{ item }}</h3></el-carousel-item></el-carousel></div>
</template><style lang="stylus" scoped>
.el-carousel {width: 500px;.el-carousel__item:nth-child(2n) {background-color: #99a9bf;}.el-carousel__item:nth-child(2n+1) {background-color: #d3dce6;}/deep/ .el-carousel__indicators {// 指示器left: unset;transform: unset;right: 2%;}/deep/ .el-carousel__button {// 指示器按钮width: 10px;height: 10px;border: none;border-radius: 50%;background-color: rgba(0, 0, 0, 0.2);}/deep/ .is-active .el-carousel__button {// 指示器激活按钮background: #3f8ec8;}
}
</style>

知识点：

代码第 20 - 34 行，为指示器 css 设置
代码第 20、25、32 行，使用关键字 /deep/，表示改变 element-ui 组件深层次样式；
代码第 21、22 行，使用关键字 unset，表示重置；

Vue ElementUI el-carousel 走马灯指示灯样式修改相关推荐

(Carousel)解决：Element-ui 中 Carousel 走马灯的样式的修改问题
Ⅰ.Element-ui 提供的组件与想要目标情况的对比: 1.Element-ui 提供组件情况: 其一.Element-ui 自提供的代码情况为(示例的代码,例子如下): // Element-u ...
常见的 vue elementUI el的标签总结
vue elementUI el的标签总结标签源码标签作用 el-col 整体 el-container 主体区域 el-tooltip 提示框信息 el-header 内容头部区域 el-asi ...
vue+element之carousel走马灯的使用（The use of vue+element carousel）
2022.10.13 大家好,今天我使用了vue+element实现走马灯的效果,类似于轮播图,可以进行一个图片的滑动. Hello, everyone. Today, I used vue+elem ...
解决ant design vue中的modal弹框样式修改无效问题修改modal样式无效
ant design vue中的modal弹框修改样式无效问题 ant中的弹框样式是修改不了的原因在于弹框modal被挂载在最大的元素div外面了所以需要将挂载在某个html元素上在modal外 ...
【elementUI】el-table树形结构样式修改-gif展示说明按要求自取即可
不用羡慕别人,自己亦是风景. 实现目标:使用element-ui的table组件显示树结构额外要求: (1)修改树形结构前方小箭头图标样式 (2)同级数据对齐 (2)小图标展开收起不旋转 (3)小图 ...
vue+ElementUI的树形菜单背景颜色修改
前言最近开发项目遇到一个问题,就是原型图中树形菜单背景颜色是透明的但是默认的树形菜单背景颜色是白色的,用style更改不了背景颜色,最后找到了解决办法. 解决办法根据项目路径F:\project\ ...
Vue ElementUI table通过改css样式实现斜线表头
效果预览实现原理通过改css样式实现去掉第一个单元格的下边框第一列第一个单元格和第二个单元格的伪元素设置绝对定位,宽度设成1px,高度根据自己表格调整通过旋转两个单元格伪元素,并设置旋转起始 ...
elementui 下拉框滚动条样式修改
:popper-append-to-body="false" **这个必须加在el-select 里, 然后再加这个 ::v-deep .el-scrollbar__thumb{b ...
Vue ElementUI 修改消息提示框样式---messageBox 的大小
在窄屏模式下(移动端),提示框的宽度太宽,会出现显示不完全的问题. 应当如何修改 ElementUI 的样式呢? open() {this.$confirm(window.vm.$i18n.t(&qu ...

Vue ElementUI el-carousel 走马灯指示灯样式修改

一、原始样式

二、修改后

三、代码

Vue ElementUI el-carousel 走马灯指示灯样式修改相关推荐

最新文章

热门文章

Vue ElementUI el-carousel 走马灯 指示灯样式修改

一、原始样式

二、修改后

三、代码

Vue ElementUI el-carousel 走马灯 指示灯样式修改相关推荐

最新文章

热门文章

Vue ElementUI el-carousel 走马灯指示灯样式修改

Vue ElementUI el-carousel 走马灯指示灯样式修改相关推荐