MarqueeUp向上轮播的跑马灯/RollNotice向上

vue插件：向上轮播的跑马灯/向上走的滚动公告。vue's plugin: a marquee which roll up. mobile-friendly

A vue plugin/component which is like a advertising board or marquee roll up。 一个vue的插件/组件，实现了类似广告牌向上滚动的效果滚动，或者说是向上滚动的跑马灯效果。

Damon风的blog地址

npm install marquee-roll-up --save import

import MarqueeRollUp from 'marquee-roll-up' Usage

<template> <div> <MarqueeRollUp :marqueeList="list" speed="300" autoPlay="5000" height="100" width="200" bg="#f99" color="#fff" fontSize="40"> <MarqueeRollUp/> </div> </template>

<script> import MarqueeRollUp from 'marquee-roll-up' export default { components: { MarqueeRollUp }, data () { return { list: [ 'info item0', 'info item1', 'info item2', 'info item3' ] } } } </script> Props 参数

* marqueeList: [Array] 跑马灯所跑的信息 the data of the marquee * width,height: (px) [Number/String] && match(/\d+/) 跑马灯的宽度和高度 the maximum width and height of the preview container。 width-default: 200 height-default: 38 * bg: (color) [String] 跑马灯的背景颜色 the backgroundColor of the preview container。 default: '#BD9955' * color: (color) [String] 跑马灯的内容区字体颜色 the color of the font。 default: '#fff' * fontSize: (px) [Number/String] && match(/\d+/) 跑马灯的字体大小 the fontSize of the font。 default: 12 * autoplay: (ms) [Number/String] && match(/\d+/) 轮播间隔时间 the autoplay time。 default: 3000 * speed: (ms) [Number/String] && match(/\d+/) 轮播动画的速度 the speed of animation。 default: 500 show2 上面使用事例的配置参数展示图 VS 默认样式展示图。the show of above example with personal options VS the show with default options