@jiexc0la/text-scroll-vertical

text-scroll-vertical

介绍

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

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

😁 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）。 `