Vue2+elementui滚动文本实现代码

在Vue2中结合Element UI实现滚动文本，通常可以使用`v-html`指令来显示HTML内容，并配合Element UI的`el-scrollbar`组件来实现滚动效果。以下是一个简单的示例：

<template>
  <div class="scroll-container">
    <div v-html="longText" class="scroll-content"></div>
    <el-scrollbar :always-visible="true">
      <div ref="scrollContent" class="scroll-inner">{{ longText }}</div>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longText: '<p>这里是一段很长的文字，可能会超过视口宽度...</p>' + // 长度自行设置
        '...更多文字，包含很多行，用于演示滚动效果。</p>',
    };
  },
};
</script>

<style scoped>
.scroll-container {
  overflow: auto;
}

.scroll-content {
  width: 100%;
  height: 400px; // 设置合理的高度，根据实际需求调整
  white-space: nowrap;
}

.scroll-inner {
  display: inline-block;
}
</style>

在这个例子中，`longText`属性存储了需要滚动显示的长文本。通过`v-html`将它渲染到`.scroll-content`元素上，然后在外面包裹一个`el-scrollbar`组件，设置`always-visible`使其始终可见，`ref="scrollContent"`用于在JavaScript中引用这个滚动区域。