@jiexc0la/text-scroll-vertical

1.0.0 • Public • Published

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);
  1. 局部组件
<script>
import { TextScrollVertical } from '@jiexc0la/text-scroll-vertical';

export default {
  components: {
    TextScrollVertical
  }
  ...
}
</script>
  1. 参数说明
<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 溢出行数限制 仅在overflowModelineClamp时生效,若overflowModeheight,无需配置此选项
animateConfig {Object} 详见下方 动画配置 仅在isOverflowScrolltrue时生效
    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 是否显示最后一行展示不全的文本 该配置仅在overflowModeheightisOverflowScrollfalse时生效。因容器高度固定,会出现最后一行只显示部分的场景,若设置为false,会自动忽略展示不全的文本
customClass {string} '' 传入自定义样式类名本 -
  1. 注意事项
  • 若想文本在固定高度区域内省略或滚动,请给组件或组件父容器设置高度。
  • 组件内部计算涉及文本行高,请给组件或组件父容器设置line-height属性(非normal)。 `

Package Sidebar

Install

npm i @jiexc0la/text-scroll-vertical

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

15.7 kB

Total Files

8

Last publish

Collaborators

  • jiex