代码拉取完成，页面将自动刷新
vue2 多行文本纵向无限滚动组件。支持全局安装和局部安装；支持自定义滚动方向和速度。
npm i @jiexc0la/text-scroll-vertical -S
// main.js
import Vue from 'vue';
import TextScrollVertical from '@jiexc0la/text-scroll-vertical';
Vue.use(TextScrollVertical);
<script>
import { TextScrollVertical } from '@jiexc0la/text-scroll-vertical';
export default {
components: {
TextScrollVertical
}
...
}
</script>
<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} | '' |
传入自定义样式类名本 | - |
line-height属性（非normal）。
`此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
