一个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

---

官网：https://github.com/YishaiBerg/vue-dynamic-marquee

演示：https://www.vue365.cn/code_demo.php?id=4356

GitHub下载：https://github.com/YishaiBerg/vue-dynamic-marquee/archive/master.zip