Vue中的动态字幕效果 - vue-dynamic-marquee

Vue中的动态字幕效果 - vue-dynamic-marquee
插件名称 vue-dynamic-marquee
发布时间 2021年3月19日
插件作者 YishaiBerg

一个Vue.js组件,可在您的应用程序上实现动态的,可配置的字幕效果。

特征:

  • 支持水平和垂直滚动
  • 自动播放并在悬停时暂停。
  • 无限循环与否。

如何使用它:

1.导入动态选取框组件。

import DynamicMarquee from ‘vue-dynamic-marquee’;

2.注册组件。

Vue.component(‘dynamic-marquee’, DynamicMarquee);

3.将<dynamic-marquee>组件添加到模板。

<dynamic-marquee>
  这里有字幕内容吗
</dynamic-marquee>

4.可用的组件道具。

speed: {
  type: Object,
  default() {
    return {
      type: 'pps',
      number: 100,
    };
  },
  validator(val) {
    return (
      val.type &&
      ['pps', 'duration'].includes(val.type) &&
      val.number &&
      !isNaN(val.number)
    );
  },
},
repeat: {
  type: Boolean,
  default: true,
},
repeatMargin: {
  type: Number,
  default: 10,
},
hoverPause: {
  type: Boolean,
  default: true,
},
pause: {
  type: Boolean,
  default: false,
},
direction: {
  type: String,
  default: 'column',
  validator(val) {
    return ['column', 'row'].includes(val);
  },
},
reverse: {
  type: Boolean,
  default: false,
},

安装和下载:

# Yarn
$ yarn add vue-dynamic-marquee

# NPM
$ npm i vue-dynamic-marquee