---

前言

vue-danmaku 是一个基于 vue 的弹幕交互组件，易上手，还可自定义修改弹幕的样式，因此推荐在vue中实现弹幕效果时使用。

---

使用步骤

1. 全局下载

npm install vue-danmaku --save
1

2. 在想要实现弹幕效果的页面中引入，注册并使用

<template>
  <-- 使用 -->
  <vue-danmaku :danmus="danmus"
  				loop
  				style="height:200px; width:100%;"
  				ref="danmaku"
  				@play-end="end">
  </vue-danmaku>
</template>

<script>
// 1. 引入
import vueDanmaku from 'vue-danmaku'

export default {
  name: "barrage",
  components: {
  // 2. 注册
    vueDanmaku
  },
  data() {
    return {
      danmus: ['这也太强了', '666', '万能的人才', '叹为观止', '优秀']
    }
  },
  methods: {
    end() {
      console.log(this.$refs.danmaku);
    }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

效果如下：

---

总结

更多内容请参考： vue-danmaku官方文档