vue3水平文字滚动

在Vue3中，实现水平文字滚动可以通过以下步骤：
1. 在组件中定义一个滚动区域的容器，并设置它的宽度、高度和overflow属性为hidden。
2. 在滚动区域容器内部定义一个span标签，用于包裹要滚动的文字内容。
3. 在组件中使用Vue3的生命周期函数或者watch来监听文本内容的变化。
4. 使用JavaScript的setInterval()函数或者Vue3的计时器来不断改变span标签的marginLeft属性，从而实现滚动效果。

下面是一个简单的Vue3水平文字滚动组件示例：

<template>
  <div class="scroll-container">
    <span ref="text" class="scroll-text">{{ content }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: '这是一段要滚动的文字内容'
    }
  },
  mounted() {
    setInterval(() => {
      const textWidth = this.$refs.text.offsetWidth
      const containerWidth = this.$el.offsetWidth
      if (textWidth > containerWidth) {
        this.$refs.text.style.marginLeft = `-${textWidth}px`
      } else {
        this.$refs.text.style.marginLeft = 0
      }
    }, 1000)
  }
}
</script>

<style>
.scroll-container {
  width: 200px;
  height: 20px;
  overflow: hidden;
}
.scroll-text {
  display: inline-block;
  white-space: nowrap;
}
</style>