vue-bullet-screen
v0.0.3
Published
A Vue.js bullet screen plugin
Downloads
29
Readme
vue-bullet-screen
A Vue.js bullet screen plugin
Install
npm
npm install vue-bullet-screen --save
import VueBulletScreen from 'vue-bullet-screen'
Vue.use(VueBulletScreen)
Direct include
<script src="/dist/vue-bullet-screen.js"></script>
Usage
Template
<vue-bullet-screen v-bind:bulletList="bulletList" ref="vueBulletScreen"></vue-bullet-screen>
Script
export default {
name: 'app',
data() {
return {
id: 0,
message: 'vue bullet screen'
bulletList: []
}
},
methods: {
addBullet() {
this.bulletList.push({
id: ++id,
avatar: "/static/logo.png",
message: this.message,
time: 5
});
},
play() {
this.$refs.vueBulletScreen.play();
},
stop() {
this.$refs.vueBulletScreen.stop();
}
...
Options
|Recognizer|Type|Default|Example| |---|----|----|----| |show|Boolean|true|v-bind:show="isShow"| |loop|Boolean|false|v-bind:loop="isLoop"| |bulletList|Array|[ ]|v-bind:bulletList="bulletList"|