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
)。 `