修改elementui 走马灯指示器css样式

::v-deep .el-carousel__indicators {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  padding-left: 5px;
  padding-right: 5px;
  height: 34px;
}
::v-deep .el-carousel__button {
  width: 10px;
  height: 10px;
  border: none;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.2);
}
::v-deep .is-active .el-carousel__button {
  // 指示器激活按钮
  background: #355c78;
}

要实现element UI的公告跑马灯效果,可以使用element-ui的carousel走马灯)组件。根据引用的描述,我们可以将每条公告内容看作是走马灯的一个item,并根据需要调整相关配置。 首先,需要在html部分引入carousel组件并设置相关属性。可以参考引用中的示例代码。其中,`el-card`用于包裹carousel组件,`el-carousel`是carousel组件本身,`el-carousel-item`是每个公告内容的item。 ```html <el-card class="notice"> <el-carousel indicator-position="none" arrow="never" direction="vertical" :interval="5000"> <el-carousel-item v-for="i in 4" :key="i" class="notice_item"> <img src="@/assets/images/notice.png" alt=""> 此处是公告内容!此处是公告内容!{{i}} </el-carousel-item> </el-carousel> </el-card> ``` 在上面的代码中,`indicator-position="none"`表示去掉指示器,`arrow="never"`表示去掉左右箭头,`direction="vertical"`表示使用垂直滚动方式。 接下来,可以根据实际需要自定义公告内容的样式,比如设置公告内容的字体颜色、背景色等。 ```css .notice_item { color: #333; background-color: #f5f5f5; padding: 10px; } ``` 以上就是实现element UI公告跑马灯效果的基本步骤。你可以根据自己的需求进一步调整样式或其他属性来满足具体的要*** 把每条公告内容看成是走马灯的一个item,去掉左右箭头,去掉指示器,上下滚动用vertical,水平滚动用horizontal html部分 <el-card class="notice"> <el-carousel indicator-position="none" arrow="never" direction="vertical" :interval="5000"> <el-carousel-item v-for="i in 4" :key="i" class="notice_item"> <img src="@/assets/images/notice.png" alt=""> 此处是公告内容!此处是公告内容!{{i}} </el-carousel-item> </el-carousel> </el-card>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值