插件名称 | 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