vue3+elementplus实现滚动通知栏

你可以使用Vue 3和Element Plus来实现一个滚动通知栏。以下是一个简单的示例：

首先，安装Element Plus和Vue Router（如果还没有安装）：

npm install element-plus vue-router

然后，在你的Vue文件中，引入所需的组件和样式：

<template>
  <div class="scroll-notice">
    <el-scrollbar ref="scrollbar" :wrap-style="{ height: '40px' }">
      <el-scrollbar-wrap>
        <div class="notice-content" :style="{ top: top + 'px' }">
          <!-- 这里放置通知内容 -->
          <div v-for="(notice, index) in notices" :key="index" class="notice-item">
            {{ notice }}
          </div>
        </div>
      </el-scrollbar-wrap>
    </el-scrollbar>
  </div>
</template>

<script>
import { ref, reactive, watch } from 'vue';

export default {
  name: 'ScrollNotice',
  data() {
    return {
      top: 0,
      notices: [
        '通知1',
        '通知2',
        '通知3',
        // 更多通知...
      ],
    };
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      const scrollHeight = this.$refs.scrollbar.$el.clientHeight;
      const contentHeight = this.$refs.scrollbar.scrollContent.offsetHeight;

      if (contentHeight > scrollHeight) {
        // 开始滚动
        const updateTop = () => {
          this.top -= 1;
          if (this.top <= -contentHeight) {
            this.top = scrollHeight;
          }
        };

        this.timer = setInterval(updateTop, 20);
      }
    },
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

<style>
.scroll-notice {
  width: 100%;
  height: 40px;
}

.notice-content {
  position: relative;
}

.notice-item {
  line-height: 40px;
}
</style>

在上面的示例中，我们使用了`el-scrollbar`组件来创建一个带有滚动条的容器。通知内容放置在一个具有绝对定位的容器内，并通过改变容器的`top`值来实现滚动效果。在`mounted`钩子中，我们调用`startScroll`方法来启动滚动。

当通知内容的高度大于容器的高度时，我们会通过定时器不断更新`top`值，从而实现滚动效果。当滚动到底部时，我们将`top`值重置为容器的高度，以实现循环滚动。

请注意，这只是一个简单的示例，你可以根据实际需求进行修改和扩展。你可能需要根据具体情况进行样式调整和数据绑定。

希望能对你有所帮助！