(1)效果
如上图所示的效果,这里我们使用vue 制作。
(2)使用技术 vue + vue-baberrage
1.安装:
npm install vue-baberrage
2.引入
方式一:
import Vue from 'vue' import { vueBaberrage } from 'vue-baberrage' Vue.use(vueBaberrage)
方式二:
const vueBaberrage = request('vue-baberrage').vueBaberrage
方式三:
3.使用
HTML
JS
import { MESSAGE_TYPE } from 'vue-baberrage' export default { name: 'app', data () { return { msg: 'Hello vue-baberrage', barrageIsShow: true, currentId : 0, barrageLoop: false, barrageList: [] } }, methods:{ addToList (){ this.barrageList.push({ id: ++this.currentId, avatar: "./static/avatar.jpg", msg: this.msg, time: 5, type: MESSAGE_TYPE.NORMAL, }); ...(3)实例演示
这个封装成一个 vue的组件:
推荐阅读vue实现弹幕功能
阅读 658 / 2019-12-30 11:38:02
解决vue打包后刷新页面报错:Unexpected token <
阅读 452 / 2019-12-30 11:46:40
微信小程序iOS下拉白屏晃动问题解决方案
阅读 406 / 2019-12-30 11:38:59
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
阅读 401 / 2019-12-30 11:42:49
layui表格 列自动适应大小失效的解决方法
阅读 393 / 2019-12-30 11:43:37
vue的路由映射问题及解决方案
阅读 341 / 2019-12-30 11:38:44
Element-Ui组件 NavMenu 导航菜单的具体使用
阅读 335 / 2019-12-30 11:38:10
Vue 3.0双向绑定原理的实现方法
阅读 326 / 2019-12-30 11:38:25
猜你喜欢