更新记录
1.0.1(2019-11-28) 下载此版本
新增兼容H5端弹幕
1.0.0(2019-11-28) 下载此版本
最近要写个带弹幕功能的项目,插件市场没找到弹幕组件,索性自己写了一个。
希望能帮到你!
不要期待我更新,我很懒
平台兼容性
完整示例可导入示例项目运行
不要期待更新,我很懒~
希望能帮到你!
属性说明
属性 | 是否必填 | 值类型 | 默认值 | 说明 |
---|---|---|---|---|
minTime | 否 | Number | 4 | 最慢奔跑速度(s) |
maxTime | 否 | Number | 9 | 最快奔跑速度(s) |
minTop | 否 | Number | 0 | 距顶部最小值(%) |
maxTop | 否 | Number | 40 | 距顶部最大值(%) |
@end | 否 | CallBack | 一轮结束回调 |
ref调用
方法 | 传入参数类型 | 说明 |
---|---|---|
start | Array | 奔跑吧兄die |
add | String | 插入一条弹幕 |
vue:
<l-barrage ref="lBarrage" @end="onEnd"></l-barrage>
js:
import lBarrage from '@/components/l-barrage/l-barrage.vue'
components:{lBarrage}
- 函数示例
/* 导入弹幕,开始奔跑 */
this.$refs.lBarrage.start([
'新年到,祝福来报到:大财、小财、意外财,财源滚滚',
'亲情、爱情、朋友情,份份真情',
'官运、财运、桃花运,运运亨通',
'爱人、亲人、家里人,人人平安',
'福气多多','快乐连连','万事圆圆','微笑甜甜',
'一帆风顺','二龙腾飞','三羊开泰','四季平安','五福临门','六六大顺','七星高照','八方来财','九九同心','十全十美!',
'新年快乐',
]);
/*插入一条弹幕*/
this.$refs.lBarrage.add('希望能帮到你,我叫好人不留名~~~');
/* @end回调 */
onEnd() {
console.log("一轮结束,再来一波");
this.$refs.lBarrage.start([
'感谢赞赏点赞评论和提出意见的老铁们',
'能帮到你们就好',
'祝大家BUG一点自通~',
]);
}