├── .gitignore
├── babel.config.json
├── types
    └── index.d.ts
├── src
    ├── index.js
    ├── extend.js
    ├── barrage.js
    ├── index.vue
    └── track.js
├── webpack.config.js
├── package.json
├── .github
    └── workflows
    │   └── static.yml
├── README.md
├── example
    ├── index.html
    └── index.js
└── lib
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/babel.config.json:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["@babel/preset-env"]
3 | }


--------------------------------------------------------------------------------
/types/index.d.ts:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | 
3 | export default function install(vue: typeof Vue): void


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import Barrage from "../src/index.vue";
2 | export let vue
3 | 
4 | export default function (Vue) {
5 |   vue = Vue
6 |   Vue.component(Barrage.name, Barrage)
7 | }


--------------------------------------------------------------------------------
/src/extend.js:
--------------------------------------------------------------------------------
1 | import { vue } from './index'
2 | 
3 | export const createVueNode = (attributeData, slots) => vue.extend({
4 |   render(h) {
5 |     return h('div', attributeData, slots)
6 |   }
7 | })


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const { VueLoaderPlugin } = require('vue-loader')
 2 | const path = require('path')
 3 | 
 4 | module.exports = {
 5 |   entry: './src/index.js',
 6 |   // experiments: {
 7 |   //   outputModule: true,
 8 |   // },
 9 |   output: {
10 |     path: path.resolve('./lib'),
11 |     filename: 'index.js',
12 |     library: {
13 |       name: 'Barrage',
14 |       type: 'umd',
15 |       export: 'default'
16 |       // type: 'module'
17 |     }
18 |   },
19 |   externals: {
20 |     'vue': 'Vue'
21 |   },
22 |   module: {
23 |     rules: [
24 |       {
25 |         test: /\.vue/,
26 |         use: 'vue-loader'
27 |       },
28 |       {
29 |         test: /\.js$/,
30 |         use: 'babel-loader'
31 |       },
32 |       {
33 |         test: /\.css$/,
34 |         use: ['vue-style-loader', 'css-loader']
35 |       },
36 |     ]
37 |   },
38 |   plugins: [
39 |     new VueLoaderPlugin()
40 |   ]
41 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-custom-barrage",
 3 |   "version": "0.0.6",
 4 |   "description": "基于 vue 的自定义弹幕组件",
 5 |   "author": "李少博",
 6 |   "homepage": "https://github.com/lishaobos/vue-custom-barrage#readme",
 7 |   "license": "ISC",
 8 |   "main": "lib/index.js",
 9 |   "directories": {
10 |     "lib": "lib",
11 |     "test": "__tests__"
12 |   },
13 |   "typings": "types/index.d.ts",
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "git+https://github.com/lishaobos/vue-custom-barrage.git"
17 |   },
18 |   "scripts": {
19 |     "start": "webpack --mode development --watch",
20 |     "build": "webpack --mode production"
21 |   },
22 |   "bugs": {
23 |     "url": "https://github.com/lishaobos/vue-custom-barrage/issues"
24 |   },
25 |   "devDependencies": {
26 |     "@babel/cli": "^7.15.4",
27 |     "@babel/core": "^7.15.5",
28 |     "@babel/preset-env": "^7.15.6",
29 |     "babel-loader": "^8.2.2",
30 |     "css-loader": "^6.2.0",
31 |     "vue-loader": "^15.9.8",
32 |     "vue-style-loader": "^4.1.3",
33 |     "vue-template-compiler": "^2.6.14",
34 |     "webpack": "^5.52.0",
35 |     "webpack-cli": "^4.8.0"
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/.github/workflows/static.yml:
--------------------------------------------------------------------------------
 1 | # Simple workflow for deploying static content to GitHub Pages
 2 | name: Deploy static content to Pages
 3 | 
 4 | on:
 5 |   # Runs on pushes targeting the default branch
 6 |   push:
 7 |     branches: ["master"]
 8 | 
 9 |   # Allows you to run this workflow manually from the Actions tab
10 |   workflow_dispatch:
11 | 
12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
13 | permissions:
14 |   contents: read
15 |   pages: write
16 |   id-token: write
17 | 
18 | # Allow one concurrent deployment
19 | concurrency:
20 |   group: "pages"
21 |   cancel-in-progress: true
22 | 
23 | jobs:
24 |   # Single deploy job since we're just deploying
25 |   deploy:
26 |     environment:
27 |       name: github-pages
28 |       url: ${{ steps.deployment.outputs.page_url }}
29 |     runs-on: ubuntu-latest
30 |     steps:
31 |       - name: Checkout
32 |         uses: actions/checkout@v3
33 |       - name: Setup Pages
34 |         uses: actions/configure-pages@v2
35 |       - name: Upload artifact
36 |         uses: actions/upload-pages-artifact@v1
37 |         with:
38 |           path: 'example'
39 |       - name: Deploy to GitHub Pages
40 |         id: deployment
41 |         uses: actions/deploy-pages@v1
42 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # `vue-custom-barrage`
 2 | 
 3 | 支持用户使用插槽自定义弹幕，使用简单, 无须担心 XSS
 4 | 
 5 | ## [DEMO](https://lishaobos.github.io/vue-custom-barrage/)
 6 | 
 7 | 
 8 | ## Install
 9 | 
10 | ```
11 | npm i vue-custom-barrage
12 | ```
13 | 
14 | ## Use
15 | 
16 | ```
17 | import Vue from 'vue'
18 | import Barrage from 'vue-custom-barrage';
19 | 
20 | Vue.use(Barrage)
21 | ```
22 | 
23 | 
24 | ## Example
25 | 
26 | ```
27 | <Barrage :data='barrageData' style='height: 400px' />
28 | 
29 | 
30 | export default {
31 |   data() {
32 |     return {
33 |       barrageData: ['text1', 'text2', 'text3']
34 |     }
35 |   }
36 | }
37 | ```
38 | 
39 | ```
40 | <Barrage :data='barrageData' style='height: 400px'>
41 |   <template #default='data'>
42 |     <div>自定义弹幕 {{ data.text }}</div>
43 |   </template>
44 | </Barrage>
45 | 
46 | export default {
47 |   data() {
48 |     return {
49 |       barrageData: [
50 |         { text: 'text1' },
51 |         { text: 'text2' },
52 |         { text: 'text3' },
53 |       ]
54 |     }
55 |   }
56 | }
57 | ```
58 | 
59 | ## Options
60 | 
61 | 参数 | 描述 | 类型 | 可选值 | 默认值
62 | --|:--:|--:|--:|--:
63 | pause | 是否全部暂停 | boolean | - | false
64 | touchPause | 是否触摸弹幕暂停 | boolean | - | false
65 | barrageClass | 弹幕类名 | string | - | -
66 | barrageStyle | 弹幕样式 | object | - | -
67 | showArea | 弹幕展示区域 | string | top / middle / bottom / all | all
68 | trackHeight | 弹幕轨道高度 | number | - | 20
69 | speed | 弹幕速度(单位：秒) | number | - | 10
70 | defer | 同一轨道弹幕完全出现至下条弹幕首次出现的间隔(单位：秒) | number | - | 0.5
71 | data | 弹幕数据 | array | - | []


--------------------------------------------------------------------------------
/src/barrage.js:
--------------------------------------------------------------------------------
 1 | import Track from './track'
 2 | export default class Barrage {
 3 |   constructor(instance) {
 4 |     this.instance = instance
 5 |     this.playState = 'running'
 6 |     this.tracks = []
 7 |     this.queue = []
 8 |     this.createTracks()
 9 |   }
10 | 
11 |   changePlayState(state) {
12 |     this.playState = state
13 |     this.instance.$el.style.setProperty('--playState', state)
14 |   }
15 | 
16 |   pause() {
17 |     this.changePlayState('paused')
18 | 
19 |     for (const item of this.tracks) {
20 |       item.pause()
21 |     }
22 |   }
23 | 
24 |   start() {
25 |     this.changePlayState('running')
26 | 
27 |     for (const item of this.tracks) {
28 |       item.start()
29 |     }
30 |   }
31 | 
32 |   createTracks() {
33 |     this.tracks.length = 0
34 |     const height = this.instance.$el.offsetHeight
35 |     const trackHeight = this.instance.trackHeight
36 |     const stackNum = height / trackHeight
37 |     
38 |     // for (let i = 0; i < 1; i++) {
39 |     for (let i = 0; i < stackNum; i++) {
40 |       const track = new Track(i * trackHeight, this.instance, this.queue)
41 |       this.tracks.push(track)
42 |     }
43 |   }
44 | 
45 |   setBullet(data) {
46 |     Array.isArray(data) ? this.queue.push(...data) : this.queue.push(data)
47 | 
48 |     for (const track of this.tracks) {
49 |       !track.isHidden && track.biubiu()
50 |     }
51 |   }
52 | 
53 |   // all top middle bottom
54 |   showTracks(type) {
55 |     if (type === 'all') {
56 |       for (const track of this.tracks) {
57 |         track.show()
58 |       }
59 |       return
60 |     }
61 |     
62 |     const dis = Math.round(this.tracks.length / 3)
63 |     const typeMap = {
64 |       top: 0,
65 |       middle: 1,
66 |       bottom: 2
67 |     }
68 | 
69 |     const start = typeMap[type] * dis
70 |     const end = start + dis
71 |     this.tracks.forEach((track, i) => {
72 |       if (i >= start && i < end) {
73 |         track.show()
74 |       } else {
75 |         if (type === 'bottom' && i >= end) track.show()
76 |         else track.hidden()
77 |       }
78 |     })
79 |   }
80 | }


--------------------------------------------------------------------------------
/src/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div 
  3 |     :class="{ 
  4 |       'barrage-container': true,
  5 |       'barrage-container-touch': touchPause,
  6 |     }"
  7 |   />
  8 | </template>
  9 | 
 10 | <script>
 11 | import Barrage from './barrage'
 12 | 
 13 | export default {
 14 |   name: 'Barrage',
 15 |   props: {
 16 |     pause: Boolean,
 17 |     touchPause: Boolean,
 18 |     barrageClass: {
 19 |       type: String,
 20 |       default: ''
 21 |     },
 22 |     barrageStyle: {
 23 |       type: Object,
 24 |       default() {
 25 |         return {}
 26 |       }
 27 |     },
 28 |     // all top middle bottom
 29 |     showArea: {
 30 |       type: String,
 31 |       default: 'all'
 32 |     },
 33 |     trackHeight: {
 34 |       type: Number,
 35 |       default: 20
 36 |     },
 37 |     speed: {
 38 |       type: Number,
 39 |       default: 10
 40 |     },
 41 |     defer: {
 42 |       type: Number,
 43 |       default: 0.5
 44 |     },
 45 |     data: {
 46 |       type: Array,
 47 |       default() {
 48 |         return []
 49 |       }
 50 |     }
 51 |   },
 52 |   mounted() {
 53 |     this.initBarrage()
 54 |   },
 55 |   methods: {
 56 |     initBarrage() {
 57 |       const barrage = new Barrage(this)
 58 | 
 59 |       this.$watch('showArea', barrage.showTracks.bind(barrage))
 60 | 
 61 |       this.$watch('pause', val => {
 62 |         if (val) return barrage.pause()
 63 | 
 64 |         barrage.start()
 65 |       })
 66 | 
 67 |       this.$watch('data', data => {
 68 |         if (!data.length) return
 69 | 
 70 |         barrage.setBullet([...data])
 71 |         data.length = 0
 72 |       }, { immediate: true })
 73 |     }
 74 |   }
 75 | }
 76 | </script>
 77 | 
 78 | <style>
 79 | 
 80 | @keyframes barrageMove {
 81 |   to {
 82 |     transform: translateX(var(--offset));
 83 |   }
 84 | }
 85 | 
 86 | .barrage-container {
 87 |   position: relative;
 88 |   overflow: hidden;
 89 | }
 90 | 
 91 | .barrage-bullet {
 92 |   position: absolute;
 93 |   display: inline-block;
 94 |   height: 20px;
 95 |   top: 0;;
 96 |   left: 100%;
 97 |   white-space: nowrap;
 98 |   animation-name: barrageMove;
 99 |   animation-timing-function: linear;
100 |   animation-play-state: var(--playState);
101 |   animation-duration: var(--time);
102 | }
103 | 
104 | .barrage-container-touch .barrage-bullet:hover {
105 |   cursor: pointer;
106 |   animation-play-state: paused;
107 |   z-index: 1;
108 | }
109 | 
110 | </style>  


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |     <meta charset="UTF-8">
 6 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |     <title>vue-custom-barrage</title>
 9 |     <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
10 |     <script src="./index.js"></script>
11 |     <style>
12 |       .my-barrage {
13 |         height: 400px;
14 |         width: 50%;
15 |         border: 1px solid;
16 |       }
17 |     </style>
18 | </head>
19 | 
20 | <body>
21 |   <div id="app">
22 |     <Barrage 
23 |       class="my-barrage"
24 |       :pause='pause'
25 |       :show-area='area'
26 |       :speed="speed || 1"
27 |       :data="barrageData"
28 |       touch-pause
29 |       :defer='defer || 0.1'
30 |     >
31 |       <template #default='data'>
32 |         {{ data }}
33 |       </template>
34 |     </Barrage>
35 | 
36 |     <p>
37 |       <button @click='pause = !pause'>暂停/恢复</button>
38 |     </p>
39 |     <p>
40 |       <button @click="biubiu">发射</button>
41 |     </p>
42 |     <p>
43 |       发射数量：<input type="number" v-model.number="barrageNum" min="1">
44 |     </p>
45 |     <p>
46 |       发射速度：<input type="number" v-model.number="speed">
47 |     </p>
48 |     <p>
49 |       发射延迟：<input type="number" v-model.number="defer">
50 |     </p>
51 |     <p>
52 |       发射内容：<input type="text" v-model="barrageText">
53 |     </p>
54 |     <p>
55 |       弹幕区域：
56 |       <select v-model="area" placeholder="请选择">
57 |         <option label="all" value="all"></option>
58 |         <option label="top" value="top"></option>
59 |         <option label="middle" value="middle"></option>
60 |         <option label="bottom" value="bottom"></option>
61 |       </select>
62 |     </p>
63 |   </div>
64 | </body>
65 | <script>
66 |   Vue.use(Barrage);
67 |   const app = new Vue({
68 |     el: '#app',
69 |     data() {
70 |       return {
71 |         barrageText: '默认弹幕...',
72 |         barrageNum: 100,
73 |         area: 'all',
74 |         speed: 5,
75 |         defer: 0.1,
76 |         pause: false,
77 |         barrageData: []
78 |       }
79 |     },
80 |     methods: {
81 |       biubiu() {
82 |         const { barrageText, barrageNum, barrageData } = this
83 |         const data = []
84 |         for (let i = 0; i < barrageNum; i++) {
85 |           const random = Math.floor(Math.random() * 20)
86 |           data.push(`${new Array(random).fill('+').join('')}${barrageText}`)
87 |         }
88 |         barrageData.push(...data)
89 |       }
90 |     }
91 |   })
92 | </script>
93 | 
94 | </html>


--------------------------------------------------------------------------------
/src/track.js:
--------------------------------------------------------------------------------
  1 | import { createVueNode } from './extend'
  2 | 
  3 | const getRandomNum = (start, end) => parseInt(Math.floor(Math.random() * (end - start + 1)) + start)
  4 | 
  5 | export default class RunWay {
  6 |     constructor(top, instance, queue) {
  7 |         this.top = top
  8 |         this.instance = instance
  9 |         this.container = instance.$el
 10 |         this.queue = queue
 11 |         this.containerWidth = this.container.getBoundingClientRect().width
 12 |         this.isFree = true
 13 |         this.currentBullet = {}
 14 |         this.timer = null
 15 |         this.startTimer = null
 16 |         this.isHidden = false
 17 |         this.isPaused = false
 18 |     }
 19 | 
 20 |     show() {
 21 |         this.isHidden = false
 22 |         this.biubiu()
 23 |     }
 24 | 
 25 |     hidden() {
 26 |         this.isHidden = true
 27 |         this.biubiu()
 28 |     }
 29 | 
 30 |     pause() {
 31 |         if (this.isPaused) return
 32 | 
 33 |         clearTimeout(this.timer)
 34 |         clearTimeout(this.startTimer)
 35 | 
 36 |         const now = Date.now()
 37 |         const duration = now - this.currentBullet.nextStartTime
 38 |         this.currentBullet.sportTime += duration
 39 |         this.isPaused = true
 40 |     }
 41 |     
 42 |     start() {
 43 |         if (!this.isPaused) return
 44 |         
 45 |         this.isPaused = false
 46 |         const now = Date.now()
 47 |         this.currentBullet.nextStartTime = now
 48 |         this.startTimer = setTimeout(() => {
 49 |             this.isFree = true
 50 |             this.biubiu()
 51 |         }, this.currentBullet.freeTime - this.currentBullet.sportTime)
 52 |     }
 53 | 
 54 |     biubiu() {
 55 |         if (!this.queue.length || !this.isFree || this.isPaused || this.isHidden) return
 56 | 
 57 |         this.isFree = false
 58 |         const val = this.queue.shift()
 59 |             
 60 |         const BarrageVNode = createVueNode({
 61 |             class: `barrage-bullet ${this.instance.barrageClass}`,
 62 |             style: {
 63 |                 ...this.instance.barrageStyle,
 64 |                 top: `${this.top}px`
 65 |             },
 66 |         }, this.instance.$scopedSlots?.default?.(val) || val)
 67 |         const barrageInstance = new BarrageVNode().$mount()
 68 | 
 69 |         this.container.append(barrageInstance.$el)
 70 |         
 71 |         const { width: offsetWidth } = barrageInstance.$el.getBoundingClientRect()
 72 |         const w = offsetWidth + this.containerWidth
 73 | 
 74 |         let { speed, defer } = this.instance
 75 |         speed *= 1000
 76 |         defer *= 1000
 77 | 
 78 |         let time = speed
 79 |         const { total, start } = this.currentBullet
 80 | 
 81 |         if (total) {
 82 |             const duration = this.currentBullet.sportTime || (Date.now() - start)
 83 |             if (total > duration) {
 84 |                 let sTime = total - duration
 85 |                 sTime += offsetWidth / (this.containerWidth / sTime)
 86 |                 time = Math.max(sTime, time)
 87 |             }
 88 |         }
 89 | 
 90 |         barrageInstance.$el.style.setProperty('--offset', `-${w}px`)
 91 |         barrageInstance.$el.style.setProperty('--time', `${time}ms`)
 92 |         
 93 |         const v = w / time
 94 |         const freeTime = offsetWidth / v
 95 | 
 96 |         this.currentBullet = {
 97 |             start: Date.now(),
 98 |             nextStartTime: Date.now(),
 99 |             sportTime: 0,
100 |             freeTime,
101 |             total: time,
102 |         }
103 |         
104 |         this.timer = setTimeout(() => {
105 |             this.isFree = true
106 |             this.biubiu()
107 |         }, freeTime + defer)
108 | 
109 |         barrageInstance.$el.onanimationend = () => requestAnimationFrame(() => {
110 |             barrageInstance.$el.remove()
111 |             barrageInstance.$el = null
112 |         })
113 |     }
114 | }


--------------------------------------------------------------------------------
/lib/index.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Barrage=t():e.Barrage=t()}(self,(function(){return(()=>{var e={705:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=e(t);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r,n){"string"==typeof e&&(e=[[null,e,""]]);var a={};if(n)for(var i=0;i<this.length;i++){var o=this[i][0];null!=o&&(a[o]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);n&&a[u[0]]||(r&&(u[2]?u[2]="".concat(r," and ").concat(u[2]):u[2]=r),t.push(u))}},t}},52:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>i});var n=r(705),a=r.n(n)()((function(e){return e[1]}));a.push([e.id,"\n@keyframes barrageMove {\nto {\r\n    transform: translateX(var(--offset));\n}\n}\n.barrage-container {\r\n  position: relative;\r\n  overflow: hidden;\n}\n.barrage-bullet {\r\n  position: absolute;\r\n  display: inline-block;\r\n  height: 20px;\r\n  top: 0;;\r\n  left: 100%;\r\n  white-space: nowrap;\r\n  animation-name: barrageMove;\r\n  animation-timing-function: linear;\r\n  animation-play-state: var(--playState);\r\n  animation-duration: var(--time);\n}\n.barrage-container-touch .barrage-bullet:hover {\r\n  cursor: pointer;\r\n  animation-play-state: paused;\r\n  z-index: 1;\n}\r\n\r\n",""]);const i=a},916:(e,t,r)=>{var n=r(52);n.__esModule&&(n=n.default),"string"==typeof n&&(n=[[e.id,n,""]]),n.locals&&(e.exports=n.locals),(0,r(23).Z)("ee106b32",n,!1,{})},23:(e,t,r)=>{"use strict";function n(e,t){for(var r=[],n={},a=0;a<t.length;a++){var i=t[a],o=i[0],s={id:e+":"+a,css:i[1],media:i[2],sourceMap:i[3]};n[o]?n[o].parts.push(s):r.push(n[o]={id:o,parts:[s]})}return r}r.d(t,{Z:()=>p});var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},o=a&&(document.head||document.getElementsByTagName("head")[0]),s=null,u=0,l=!1,c=function(){},f=null,d="data-vue-ssr-id",h="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(e,t,r,a){l=r,f=a||{};var o=n(e,t);return y(o),function(t){for(var r=[],a=0;a<o.length;a++){var s=o[a];(u=i[s.id]).refs--,r.push(u)}for(t?y(o=n(e,t)):o=[],a=0;a<r.length;a++){var u;if(0===(u=r[a]).refs){for(var l=0;l<u.parts.length;l++)u.parts[l]();delete i[u.id]}}}}function y(e){for(var t=0;t<e.length;t++){var r=e[t],n=i[r.id];if(n){n.refs++;for(var a=0;a<n.parts.length;a++)n.parts[a](r.parts[a]);for(;a<r.parts.length;a++)n.parts.push(m(r.parts[a]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{var o=[];for(a=0;a<r.parts.length;a++)o.push(m(r.parts[a]));i[r.id]={id:r.id,refs:1,parts:o}}}}function v(){var e=document.createElement("style");return e.type="text/css",o.appendChild(e),e}function m(e){var t,r,n=document.querySelector("style["+d+'~="'+e.id+'"]');if(n){if(l)return c;n.parentNode.removeChild(n)}if(h){var a=u++;n=s||(s=v()),t=w.bind(null,n,a,!1),r=w.bind(null,n,a,!0)}else n=v(),t=S.bind(null,n),r=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else r()}}var b,g=(b=[],function(e,t){return b[e]=t,b.filter(Boolean).join("\n")});function w(e,t,r,n){var a=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=g(t,a);else{var i=document.createTextNode(a),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(i,o[t]):e.appendChild(i)}}function S(e,t){var r=t.css,n=t.media,a=t.sourceMap;if(n&&e.setAttribute("media",n),f.ssrId&&e.setAttribute(d,t.id),a&&(r+="\n/*# sourceURL="+a.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var i=t[n]={id:n,exports:{}};return e[n](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";r.d(n,{default:()=>b,L:()=>m});var e=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:{"barrage-container":!0,"barrage-container-touch":e.touchPause}})};function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?t(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):t(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}e._withStripped=!0;var s=function(){function e(t,r,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.top=t,this.instance=r,this.container=r.$el,this.queue=n,this.containerWidth=this.container.getBoundingClientRect().width,this.isFree=!0,this.currentBullet={},this.timer=null,this.startTimer=null,this.isHidden=!1,this.isPaused=!1}var t,r;return t=e,(r=[{key:"show",value:function(){this.isHidden=!1,this.biubiu()}},{key:"hidden",value:function(){this.isHidden=!0,this.biubiu()}},{key:"pause",value:function(){if(!this.isPaused){clearTimeout(this.timer),clearTimeout(this.startTimer);var e=Date.now()-this.currentBullet.nextStartTime;this.currentBullet.sportTime+=e,this.isPaused=!0}}},{key:"start",value:function(){var e=this;if(this.isPaused){this.isPaused=!1;var t=Date.now();this.currentBullet.nextStartTime=t,this.startTimer=setTimeout((function(){e.isFree=!0,e.biubiu()}),this.currentBullet.freeTime-this.currentBullet.sportTime)}}},{key:"biubiu",value:function(){var e,t,r=this;if(this.queue.length&&this.isFree&&!this.isPaused&&!this.isHidden){this.isFree=!1;var n,i,o=this.queue.shift(),s=(new(n={class:"barrage-bullet ".concat(this.instance.barrageClass),style:a(a({},this.instance.barrageStyle),{},{top:"".concat(this.top,"px")})},i=(null===(e=this.instance.$scopedSlots)||void 0===e||null===(t=e.default)||void 0===t?void 0:t.call(e,o))||o,m.extend({render:function(e){return e("div",n,i)}}))).$mount();this.container.append(s.$el);var u=s.$el.getBoundingClientRect().width,l=u+this.containerWidth,c=this.instance,f=c.speed,d=c.defer;d*=1e3;var h=f*=1e3,p=this.currentBullet,y=p.total,v=p.start;if(y){var b=this.currentBullet.sportTime||Date.now()-v;if(y>b){var g=y-b;g+=u/(this.containerWidth/g),h=Math.max(g,h)}}s.$el.style.setProperty("--offset","-".concat(l,"px")),s.$el.style.setProperty("--time","".concat(h,"ms"));var w=u/(l/h);this.currentBullet={start:Date.now(),nextStartTime:Date.now(),sportTime:0,freeTime:w,total:h},this.timer=setTimeout((function(){r.isFree=!0,r.biubiu()}),w+d),s.$el.onanimationend=function(){return requestAnimationFrame((function(){s.$el.remove(),s.$el=null}))}}}}])&&o(t.prototype,r),e}();function u(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=l(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,a=function(){};return{s:a,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,o=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return o=e.done,e},e:function(e){s=!0,i=e},f:function(){try{o||null==r.return||r.return()}finally{if(s)throw i}}}}function l(e,t){if(e){if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,t):void 0}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function f(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var d=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.instance=t,this.playState="running",this.tracks=[],this.queue=[],this.createTracks()}var t,r;return t=e,(r=[{key:"changePlayState",value:function(e){this.playState=e,this.instance.$el.style.setProperty("--playState",e)}},{key:"pause",value:function(){this.changePlayState("paused");var e,t=u(this.tracks);try{for(t.s();!(e=t.n()).done;)e.value.pause()}catch(e){t.e(e)}finally{t.f()}}},{key:"start",value:function(){this.changePlayState("running");var e,t=u(this.tracks);try{for(t.s();!(e=t.n()).done;)e.value.start()}catch(e){t.e(e)}finally{t.f()}}},{key:"createTracks",value:function(){this.tracks.length=0;for(var e=this.instance.$el.offsetHeight,t=this.instance.trackHeight,r=e/t,n=0;n<r;n++){var a=new s(n*t,this.instance,this.queue);this.tracks.push(a)}}},{key:"setBullet",value:function(e){var t,r;Array.isArray(e)?(t=this.queue).push.apply(t,function(e){if(Array.isArray(e))return c(e)}(r=e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||l(r)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()):this.queue.push(e);var n,a=u(this.tracks);try{for(a.s();!(n=a.n()).done;){var i=n.value;!i.isHidden&&i.biubiu()}}catch(e){a.e(e)}finally{a.f()}}},{key:"showTracks",value:function(e){if("all"!==e){var t=Math.round(this.tracks.length/3),r={top:0,middle:1,bottom:2}[e]*t,n=r+t;this.tracks.forEach((function(t,a){a>=r&&a<n||"bottom"===e&&a>=n?t.show():t.hidden()}))}else{var a,i=u(this.tracks);try{for(i.s();!(a=i.n()).done;)a.value.show()}catch(e){i.e(e)}finally{i.f()}}}}])&&f(t.prototype,r),e}();function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const p={name:"Barrage",props:{pause:Boolean,touchPause:Boolean,barrageClass:{type:String,default:""},barrageStyle:{type:Object,default:function(){return{}}},showArea:{type:String,default:"all"},trackHeight:{type:Number,default:20},speed:{type:Number,default:10},defer:{type:Number,default:.5},data:{type:Array,default:function(){return[]}}},mounted:function(){this.initBarrage()},methods:{initBarrage:function(){var e=new d(this);this.$watch("showArea",e.showTracks.bind(e)),this.$watch("pause",(function(t){if(t)return e.pause();e.start()})),this.$watch("data",(function(t){var r;t.length&&(e.setBullet(function(e){if(Array.isArray(e))return h(e)}(r=t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||function(e,t){if(e){if("string"==typeof e)return h(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?h(e,t):void 0}}(r)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),t.length=0)}),{immediate:!0})}}};r(916);var y=function(e,t,r,n,a,i,o,s){var u,l="function"==typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=[],l._compiled=!0),u)if(l.functional){l._injectStyles=u;var c=l.render;l.render=function(e,t){return u.call(t),c(e,t)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:l}}(p,e);y.options.__file="src/index.vue";const v=y.exports;var m;function b(e){m=e,e.component(v.name,v)}})(),n.default})()}));


--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Barrage=t():e.Barrage=t()}(self,(function(){return(()=>{var e={705:e=>{"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=e(t);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r,n){"string"==typeof e&&(e=[[null,e,""]]);var a={};if(n)for(var i=0;i<this.length;i++){var o=this[i][0];null!=o&&(a[o]=!0)}for(var s=0;s<e.length;s++){var u=[].concat(e[s]);n&&a[u[0]]||(r&&(u[2]?u[2]="".concat(r," and ").concat(u[2]):u[2]=r),t.push(u))}},t}},52:(e,t,r)=>{"use strict";r.r(t),r.d(t,{default:()=>i});var n=r(705),a=r.n(n)()((function(e){return e[1]}));a.push([e.id,"\n@keyframes barrageMove {\nto {\r\n    transform: translateX(var(--offset));\n}\n}\n.barrage-container {\r\n  position: relative;\r\n  overflow: hidden;\n}\n.barrage-bullet {\r\n  position: absolute;\r\n  display: inline-block;\r\n  height: 20px;\r\n  top: 0;;\r\n  left: 100%;\r\n  white-space: nowrap;\r\n  animation-name: barrageMove;\r\n  animation-timing-function: linear;\r\n  animation-play-state: var(--playState);\r\n  animation-duration: var(--time);\n}\n.barrage-container-touch .barrage-bullet:hover {\r\n  cursor: pointer;\r\n  animation-play-state: paused;\r\n  z-index: 1;\n}\r\n\r\n",""]);const i=a},916:(e,t,r)=>{var n=r(52);n.__esModule&&(n=n.default),"string"==typeof n&&(n=[[e.id,n,""]]),n.locals&&(e.exports=n.locals),(0,r(23).Z)("ee106b32",n,!1,{})},23:(e,t,r)=>{"use strict";function n(e,t){for(var r=[],n={},a=0;a<t.length;a++){var i=t[a],o=i[0],s={id:e+":"+a,css:i[1],media:i[2],sourceMap:i[3]};n[o]?n[o].parts.push(s):r.push(n[o]={id:o,parts:[s]})}return r}r.d(t,{Z:()=>p});var a="undefined"!=typeof document;if("undefined"!=typeof DEBUG&&DEBUG&&!a)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},o=a&&(document.head||document.getElementsByTagName("head")[0]),s=null,u=0,l=!1,c=function(){},f=null,d="data-vue-ssr-id",h="undefined"!=typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function p(e,t,r,a){l=r,f=a||{};var o=n(e,t);return y(o),function(t){for(var r=[],a=0;a<o.length;a++){var s=o[a];(u=i[s.id]).refs--,r.push(u)}for(t?y(o=n(e,t)):o=[],a=0;a<r.length;a++){var u;if(0===(u=r[a]).refs){for(var l=0;l<u.parts.length;l++)u.parts[l]();delete i[u.id]}}}}function y(e){for(var t=0;t<e.length;t++){var r=e[t],n=i[r.id];if(n){n.refs++;for(var a=0;a<n.parts.length;a++)n.parts[a](r.parts[a]);for(;a<r.parts.length;a++)n.parts.push(m(r.parts[a]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{var o=[];for(a=0;a<r.parts.length;a++)o.push(m(r.parts[a]));i[r.id]={id:r.id,refs:1,parts:o}}}}function v(){var e=document.createElement("style");return e.type="text/css",o.appendChild(e),e}function m(e){var t,r,n=document.querySelector("style["+d+'~="'+e.id+'"]');if(n){if(l)return c;n.parentNode.removeChild(n)}if(h){var a=u++;n=s||(s=v()),t=w.bind(null,n,a,!1),r=w.bind(null,n,a,!0)}else n=v(),t=S.bind(null,n),r=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else r()}}var b,g=(b=[],function(e,t){return b[e]=t,b.filter(Boolean).join("\n")});function w(e,t,r,n){var a=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=g(t,a);else{var i=document.createTextNode(a),o=e.childNodes;o[t]&&e.removeChild(o[t]),o.length?e.insertBefore(i,o[t]):e.appendChild(i)}}function S(e,t){var r=t.css,n=t.media,a=t.sourceMap;if(n&&e.setAttribute("media",n),f.ssrId&&e.setAttribute(d,t.id),a&&(r+="\n/*# sourceURL="+a.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(a))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}}},t={};function r(n){var a=t[n];if(void 0!==a)return a.exports;var i=t[n]={id:n,exports:{}};return e[n](i,i.exports,r),i.exports}r.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return r.d(t,{a:t}),t},r.d=(e,t)=>{for(var n in t)r.o(t,n)&&!r.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},r.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var n={};return(()=>{"use strict";r.d(n,{default:()=>b,L:()=>m});var e=function(){var e=this,t=e.$createElement;return(e._self._c||t)("div",{class:{"barrage-container":!0,"barrage-container-touch":e.touchPause}})};function t(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function a(e){for(var r=1;r<arguments.length;r++){var n=null!=arguments[r]?arguments[r]:{};r%2?t(Object(n),!0).forEach((function(t){i(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):t(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function i(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function o(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}e._withStripped=!0;var s=function(){function e(t,r,n){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.top=t,this.instance=r,this.container=r.$el,this.queue=n,this.containerWidth=this.container.getBoundingClientRect().width,this.isFree=!0,this.currentBullet={},this.timer=null,this.startTimer=null,this.isHidden=!1,this.isPaused=!1}var t,r;return t=e,(r=[{key:"show",value:function(){this.isHidden=!1,this.biubiu()}},{key:"hidden",value:function(){this.isHidden=!0,this.biubiu()}},{key:"pause",value:function(){if(!this.isPaused){clearTimeout(this.timer),clearTimeout(this.startTimer);var e=Date.now()-this.currentBullet.nextStartTime;this.currentBullet.sportTime+=e,this.isPaused=!0}}},{key:"start",value:function(){var e=this;if(this.isPaused){this.isPaused=!1;var t=Date.now();this.currentBullet.nextStartTime=t,this.startTimer=setTimeout((function(){e.isFree=!0,e.biubiu()}),this.currentBullet.freeTime-this.currentBullet.sportTime)}}},{key:"biubiu",value:function(){var e,t,r=this;if(this.queue.length&&this.isFree&&!this.isPaused&&!this.isHidden){this.isFree=!1;var n,i,o=this.queue.shift(),s=(new(n={class:"barrage-bullet ".concat(this.instance.barrageClass),style:a(a({},this.instance.barrageStyle),{},{top:"".concat(this.top,"px")})},i=(null===(e=this.instance.$scopedSlots)||void 0===e||null===(t=e.default)||void 0===t?void 0:t.call(e,o))||o,m.extend({render:function(e){return e("div",n,i)}}))).$mount();this.container.append(s.$el);var u=s.$el.getBoundingClientRect().width,l=u+this.containerWidth,c=this.instance,f=c.speed,d=c.defer;d*=1e3;var h=f*=1e3,p=this.currentBullet,y=p.total,v=p.start;if(y){var b=this.currentBullet.sportTime||Date.now()-v;if(y>b){var g=y-b;g+=u/(this.containerWidth/g),h=Math.max(g,h)}}s.$el.style.setProperty("--offset","-".concat(l,"px")),s.$el.style.setProperty("--time","".concat(h,"ms"));var w=u/(l/h);this.currentBullet={start:Date.now(),nextStartTime:Date.now(),sportTime:0,freeTime:w,total:h},this.timer=setTimeout((function(){r.isFree=!0,r.biubiu()}),w+d),s.$el.onanimationend=function(){return requestAnimationFrame((function(){s.$el.remove(),s.$el=null}))}}}}])&&o(t.prototype,r),e}();function u(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=l(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,a=function(){};return{s:a,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:a}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,o=!0,s=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return o=e.done,e},e:function(e){s=!0,i=e},f:function(){try{o||null==r.return||r.return()}finally{if(s)throw i}}}}function l(e,t){if(e){if("string"==typeof e)return c(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?c(e,t):void 0}}function c(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function f(e,t){for(var r=0;r<t.length;r++){var n=t[r];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}var d=function(){function e(t){!function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,e),this.instance=t,this.playState="running",this.tracks=[],this.queue=[],this.createTracks()}var t,r;return t=e,(r=[{key:"changePlayState",value:function(e){this.playState=e,this.instance.$el.style.setProperty("--playState",e)}},{key:"pause",value:function(){this.changePlayState("paused");var e,t=u(this.tracks);try{for(t.s();!(e=t.n()).done;)e.value.pause()}catch(e){t.e(e)}finally{t.f()}}},{key:"start",value:function(){this.changePlayState("running");var e,t=u(this.tracks);try{for(t.s();!(e=t.n()).done;)e.value.start()}catch(e){t.e(e)}finally{t.f()}}},{key:"createTracks",value:function(){this.tracks.length=0;for(var e=this.instance.$el.offsetHeight,t=this.instance.trackHeight,r=e/t,n=0;n<r;n++){var a=new s(n*t,this.instance,this.queue);this.tracks.push(a)}}},{key:"setBullet",value:function(e){var t,r;Array.isArray(e)?(t=this.queue).push.apply(t,function(e){if(Array.isArray(e))return c(e)}(r=e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||l(r)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()):this.queue.push(e);var n,a=u(this.tracks);try{for(a.s();!(n=a.n()).done;){var i=n.value;!i.isHidden&&i.biubiu()}}catch(e){a.e(e)}finally{a.f()}}},{key:"showTracks",value:function(e){if("all"!==e){var t=Math.round(this.tracks.length/3),r={top:0,middle:1,bottom:2}[e]*t,n=r+t;this.tracks.forEach((function(t,a){a>=r&&a<n||"bottom"===e&&a>=n?t.show():t.hidden()}))}else{var a,i=u(this.tracks);try{for(i.s();!(a=i.n()).done;)a.value.show()}catch(e){i.e(e)}finally{i.f()}}}}])&&f(t.prototype,r),e}();function h(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}const p={name:"Barrage",props:{pause:Boolean,touchPause:Boolean,barrageClass:{type:String,default:""},barrageStyle:{type:Object,default:function(){return{}}},showArea:{type:String,default:"all"},trackHeight:{type:Number,default:20},speed:{type:Number,default:10},defer:{type:Number,default:.5},data:{type:Array,default:function(){return[]}}},mounted:function(){this.initBarrage()},methods:{initBarrage:function(){var e=new d(this);this.$watch("showArea",e.showTracks.bind(e)),this.$watch("pause",(function(t){if(t)return e.pause();e.start()})),this.$watch("data",(function(t){var r;t.length&&(e.setBullet(function(e){if(Array.isArray(e))return h(e)}(r=t)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(r)||function(e,t){if(e){if("string"==typeof e)return h(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?h(e,t):void 0}}(r)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),t.length=0)}),{immediate:!0})}}};r(916);var y=function(e,t,r,n,a,i,o,s){var u,l="function"==typeof e?e.options:e;if(t&&(l.render=t,l.staticRenderFns=[],l._compiled=!0),u)if(l.functional){l._injectStyles=u;var c=l.render;l.render=function(e,t){return u.call(t),c(e,t)}}else{var f=l.beforeCreate;l.beforeCreate=f?[].concat(f,u):[u]}return{exports:e,options:l}}(p,e);y.options.__file="src/index.vue";const v=y.exports;var m;function b(e){m=e,e.component(v.name,v)}})(),n.default})()}));


--------------------------------------------------------------------------------