# text-scroll-horizontal

**Repository Path**: jiexc0la/text-scroll-horizontal

## Basic Information

- **Project Name**: text-scroll-horizontal
- **Description**: vue2 文本横向无限滚动
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2024-07-23
- **Last Updated**: 2024-07-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# text-scroll-horizontal

#### 介绍
vue2 文本横向无限滚动组件。支持全局安装和局部安装；支持自定义滚动方向和速度。

 :grin: gif图看着有点卡，实际很流畅哦
![输入图片说明](https://foruda.gitee.com/images/1721786826105376323/20551d97_5685759.gif)

#### 安装教程
```
npm i @jiexc0la/text-scroll-horizontal -S
```

#### 使用说明

1. 全局安装
```
// main.js
import Vue from 'vue';
import TextScrollHorizontal from '@jiexc0la/text-scroll-horizontal';

Vue.use(TextScrollHorizontal);
```
2.  局部组件
```
<script>
import { TextScrollHorizontal } from '@jiexc0la/text-scroll-horizontal';

export default {
  components: {
    TextScrollHorizontal
  }
  ...
}
</script>
```
3. 参数说明
```
<text-scroll-horizontal
  :value="title"
  :animate-config="animateConfig"
  :is-overflow-scroll="true"
  custom-class="class-name"
></text-scroll-horizontal>
```
+ `value`：文本内容
+ `animateConfig`：动画配置
  + `duration`: `number`，动画持续时间（s），滚动一次当前容器宽度所需时长，默认值为`5s`
  + `fixSpeed`: `number`， 固定滚动速度，单位为像素/秒。若设置了固定滚动速度（`fixSpeed > 0`），则`duration`不生效。默认值为`0`。
  + `delay`: `number`，动画延迟时间（s）。默认值为`0s`
  + `direction`: `string`，动画方向，可选值：`left`|`right`，默认值为`left`
  + `spaceWidth`: `number|string`，无限滚动首尾空白宽度，数字为像素值，字符串为百分比值（相对于容器宽度），默认值为`50%`
  + `hoverStop`: `boolean`，鼠标悬停时是否停止动画，默认值为`true`
+ `isOverflowScroll`：是否开启超出滚动，不开启文本溢出时显示省略。默认为`true`开启。
+ `customClass`：传入自定义样式类名。