vue中滚动文字公告（1）-elementUI走马灯

思路：

把每条公告内容看成是走马灯的一个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>

style

 /**/
 .notice{
    width: 1200px;
    height: 50px;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    z-index: 2;
    padding: 0;
  }
  .notice /deep/ .el-card__body{
    padding: 0;
  }
 /*使文字和公告图片在一行*/
  .notice_item{
    height: 50px;
    line-height: 50px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .notice_item img{
    width: 40px;
    /*height: 16px;*/
    margin: 0 44px 0 32px;
  }

elementUI走马灯文档：

https://element.eleme.cn/#/zh-CN/component/carousel

注：若有错误或值得改进的地方，可以留言，欢迎指正