场景

最近在做电商前台页面，首屏右下角有个公告，需要实现竖向滚动效果。也就是个竖向的轮播。

elementUi中是有轮播效果组件的。

代码如下：

<el-carousel class="lunbo" height="35" direction="vertical">
  <el-carousel-item v-for="(item, index) in currentTabList" :key="index">
    <a :href="'/resource?id=' + item.id + '&type=' + currentTab" target="_blank">{{ item.title }}</a>
  </el-carousel-item>
</el-carousel>

上面的代码需要注意的就是height和direction两个属性，height是轮播组件的高度,direction是轮播的方向。

另外，公告的内容有时候会比较多，所以需要一行展示，因此需要添加样式：

css样式

.lunbo {
  padding: 0 8px 0 0;
  box-sizing: border-box;
  height: 35px;//文本区域的高度
  line-height: 35px;//文本的行间距，与高度相同，则表示一行展示
  text-overflow: ellipsis;//超出内容...展示
  word-break: keep-all;//是否折断文本，keep-all表示不折断
  white-space: nowrap;//不换行展示文本
  overflow: hidden;//超出部分隐藏，与text-overflow配合使用
  flex: 1;//这个是跟左侧的图片组成的一个flex布局
}