text-scroll-vertical

介绍

vue2 多行文本纵向无限滚动组件。支持全局安装和局部安装；支持自定义滚动方向和速度。

• 省略模式：支持文本超出容器高度自动省略；支持文本超出设置行数自动省略。
• 滚动模式：支持文本超出容器高度纵向无限滚动；支持文本超出设置行数纵向无限滚动。

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

4. 注意事项

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