# text-scroll-vertical

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

## Basic Information

- **Project Name**: text-scroll-vertical
- **Description**: vue2多行文本省略或纵向滚动，可控制滚动方向和滚动速度
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2024-07-26
- **Last Updated**: 2024-07-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# text-scroll-vertical

#### 介绍
vue2 多行文本纵向无限滚动组件。支持全局安装和局部安装；支持自定义滚动方向和速度。
+ 省略模式：支持文本超出容器高度自动省略；支持文本超出设置行数自动省略。
+ 滚动模式：支持文本超出容器高度纵向无限滚动；支持文本超出设置行数纵向无限滚动。

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

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

#### 使用说明

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

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

export default {
  components: {
    TextScrollVertical
  }
  ...
}
</script>
```
3. 参数说明

```
<text-scroll-vertical
  :value="title"
  :animate-config="animateConfig"
  :is-overflow-scroll="true"
  overflowMode="lineClamp"
  :lineClamp="3"
></text-scroll-vertical>
```
| 参数配置 | 数据类型 | 默认值 | 描述 | 备注 |
| -------- | ------|------ | ------------ | --------- |
|  value | {string} |  `''` |  文本内容 | - |
|  isOverflowScroll |  {boolean} | `true` | 是否开启滚动 | `true`: 文本溢出滚动<br/>`false`: 文本溢出时显示省略 |
|  overflowMode |  {string} | `lineClamp` | 溢出模式(`height`\|`lineClamp`) | `height`: 内容超出容器高度时溢出（或滚动）。需固定容器高度，默认继承外层容器高度<br/>`lineClamp`: 内容超出指定行数时溢出（或滚动）。无需设置容器高度 |
|  lineClamp |  {number}  | 3 | 溢出行数限制 | 仅在`overflowMode`为`lineClamp`时生效，若`overflowMode`为`height`，无需配置此选项 |
|  animateConfig |  {Object}  | `详见下方` | 动画配置 | 仅在`isOverflowScroll`为`true`时生效 |
|  &nbsp;&nbsp;&nbsp;&nbsp;animateConfig.duration |  {number}  | `5` | 动画持续时间（s） | 滚动一次当前容器所需时长，若设置固定速度`fixSpeed`，则当前配置被忽略 |
|  &nbsp;&nbsp;&nbsp;&nbsp;animateConfig.fixSpeed |  {number}  | `0` | 固定滚动速度，单位为像素/秒 | 若设置了固定滚动速度（`fixSpeed > 0`），则`duration`不生效 |
|  &nbsp;&nbsp;&nbsp;&nbsp;animateConfig.delay |  {number}  | `0` | 动画延迟时间（s） | - |
|  &nbsp;&nbsp;&nbsp;&nbsp;animateConfig.direction |  {string}  | `up` | 文本滚动方向(`up`\|`down`) | - |
|  &nbsp;&nbsp;&nbsp;&nbsp;animateConfig.spaceWidth |  {number\|string}  | `50%` | 无限滚动首尾空白间距 | 数字为像素值，字符串为百分比值（相对于容器高度） |
|  &nbsp;&nbsp;&nbsp;&nbsp;animateConfig.hoverStop |  {boolean}  | `true` | 鼠标悬停时是否停止动画 | - |
|  showLastLine |  {boolean}  | `false` | 是否显示最后一行展示不全的文本 | 该配置仅在`overflowMode`为`height`且`isOverflowScroll`为`false`时生效。因容器高度固定，会出现最后一行只显示部分的场景，若设置为`false`，会自动忽略展示不全的文本 |
|  customClass |  {string}  | `''` | 传入自定义样式类名本 | - |

4. 注意事项
+ 若想文本在固定高度区域内省略或滚动，请给组件或组件父容器设置高度。
+ 组件内部计算涉及文本行高，请给组件或组件父容器设置`line-height`属性（非`normal`）。
`