vue element-ui实现文字横向滚动

### 实现文字横向滚动

为了实现文字的横向滚动效果，可以利用 Vue 和 Element-UI 的组合来创建自定义组件。通过 CSS 动画配合 JavaScript 控制，能够轻松达成这一目标。

#### 创建滚动容器组件

首先，在项目中安装并引入 `element-ui` 库[^2]：

npm install element-ui -S

接着编写一个名为 `ScrollText.vue` 的单文件组件用于展示滚动的文字内容：

<template>
  <div class="scroll-container">
    <el-row type="flex" justify="start">
      <span v-for="(item, index) in items" :key="index">{{ item }} </span>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'ScrollText',
  props: ['items'],
};
</script>

<style scoped>
.scroll-container {
  overflow: hidden;
  white-space: nowrap;
}

.el-row {
  animation: scroll-left 10s linear infinite;
}

@keyframes scroll-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>

此代码片段展示了如何设置样式使文本从右向左移动，并且无限循环播放动画。需要注意的是，这里使用了 `white-space: nowrap;` 来防止换行，以及设置了 `overflow:hidden;` 隐藏超出部分的内容[^1]。

#### 使用 ScrollText 组件

最后一步是在页面上实例化这个新创建好的组件，并传入要显示的数据列表作为属性传递给它：

<div id="app">
  <scroll-text :items="['Hello', 'World!', 'This', 'is', 'a', 'horizontal', 'text', 'scroller.']"></scroll-text>
</div>

import Vue from 'vue';
import App from './App.vue';
import ElRow from 'element-ui/lib/row';

Vue.component('ElRow', ElRow);
Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

上述配置确保了可以在模板内正常使用来自 `element-ui` 的布局组件 `<el-row>`。