我们做的是一个公告的提醒，滚动就可以。官网https://chenxuan0000.github.io/vue-seamless-scroll/zh/

<template>
  <div class="notice-bar" @click="tipClick">
    <div class="notice-bar__icon">
      <i class="el-icon-message-solid"></i>
    </div>
    // 主要用到的就是vue-seamless-scroll这个组件
    <vue-seamless-scroll :data="vaitingMsgList" :class-option="optionLeft" class="seamless-warp" >
      <span v-for="(item, index) in vaitingMsgList" :key="index">{{ item.messageContent}}</span>
    </vue-seamless-scroll>
  </div>
</template>

<script>
// 这个是需要通过npm安装的
import vueSeamlessScroll from 'vue-seamless-scroll'
// 这个是我们的接口，返回公告信息的
import { 方法名 } from "@/api/api地址";

export default {
  name: 'NoticeBar',
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      vaitingMsgList: [],
    }
  },
  computed: {
  	// 这是滚动需要使用到配置信息
    optionLeft(){
      return {
        step: 0.6, // 数值越大速度滚动越快
        limitMoveNum: this.vaitingMsgList.length, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 2, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
  },
  created() {
    this.getWaitingMessage()
  },
  methods: {
  // 这个是我们的接口
    getWaitingMessage() {
      方法名().then((res) => {
        this.vaitingMsgList = res.rows
      });
    },
    tipClick () {
      this.$emit('click')
    }
  }
}
</script>
<style scoped lang='scss'>
.seamless-warp {
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  > div {
    height: 32px;
    line-height: 32px;
  }
}
.notice-bar {
  position: relative;
  width: 100%;
  height: 32px;
  line-height: 32px;
  font-weight: 400;
  color: #fff;
  display: flex;
  align-items: center;
}
</style>