基于Vue 2.x的 <垂直循环滚动跑马灯> 组件
预览
功能:
- 支持通过slot自定义显示的内容(增加点击事件等)
- 可自定宽度,行高
- 可自定义字体颜色和背景色
- 可自定义滚动延迟时间
- 可自定义滚动动效速度
使用:
通过 npm 指令安装:
npm i vue-roll-up --save
在组件中加载:
注册组件:
component: VueRollUp
接着,在模版文件中定义组件
文档:
属性
属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
roll-list | 需要滚动的数据,数组类型 | Array | - |
use-slot | 设置为true的话可以在模板中使用slot特性 | Boolean | false |
width | 配置滚动的整体宽度 | Any | 200 |
height | 配置滚动的高度和行高 | Any | 35 |
color | 设置字体颜色 | String | '#333' |
bg-color | 设置背景色 | String | - |
duration | 设置滚动延迟时间(millisecond) | Number | 2000 |
speed | 设置动效速度(millisecond) | Number | 1000 |
通过slot给marquee绑定点击事件:
{{ marquee }}
如发现有任何bug或文档错误请及时联系作者,3Q