温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue如何实现弹幕功能

发布时间:2021-04-02 10:12:34 来源:亿速云 阅读:1074 作者:小新 栏目:web开发

这篇文章将为大家详细讲解有关vue如何实现弹幕功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

(1)效果

vue如何实现弹幕功能

vue如何实现弹幕功能

如上图所示的效果,这里我们使用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

方式三:

<script src="./dist/vue-baberrage.js"></script>

3.使用

HTML

<div id="app"> <vue-baberrage    :isShow= "barrageIsShow"    :barrageList = "barrageList"    :loop = "barrageLoop"    >   </vue-baberrage> </div>

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的组件:

<template>  <div class="barrages-drop">   <vue-baberrage    :isShow="barrageIsShow"    :barrageList="barrageList"    :maxWordCount="maxWordCount"    :throttleGap="throttleGap"    :loop="barrageLoop"    :boxHeight="boxHeight"    :messageHeight="messageHeight"   >   </vue-baberrage>  </div> </template> <script> import Vue from 'vue'; import { vueBaberrage, MESSAGE_TYPE } from 'vue-baberrage'; Vue.use(vueBaberrage); export default {  name: 'Barrages',  data() {  return {   msg: '马优晨就是个辣鸡~',   barrageIsShow: true,   messageHeight: 3,   boxHeight: 150,   barrageLoop: true,   maxWordCount: 3,   throttleGap: 5000,   barrageList: []  };  },  mounted() {  this.addToList();  },  methods: {  addToList() {   let list = [   {    id: 1,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 3,    barrageStyle: 'red'   },   {    id: 2,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 8,    barrageStyle: 'green'   },   {    id: 3,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 10,    barrageStyle: 'normal'   },   {    id: 4,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 5,    barrageStyle: 'blue'   },   {    id: 5,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 6,    barrageStyle: 'red'   },   {    id: 6,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 12,    barrageStyle: 'normal'   },   {    id: 7,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 5,    barrageStyle: 'red'   },   {    id: 8,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 5,    barrageStyle: 'normal'   },   {    id: 9,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 8,    barrageStyle: 'red'   },   {    id: 10,    avatar: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3064584167,3502823640&fm=26&gp=0.jpg',    msg: this.msg,    time: 10,    barrageStyle: 'yellow'   }   ];   list.forEach((v) => {   this.barrageList.push({    id: v.id,    avatar: v.avatar,    msg: v.msg,    time: v.time,    type: MESSAGE_TYPE.NORMAL,    barrageStyle: v.barrageStyle   });   });  }  } }; </script> <style lang="less"> .barrages-drop {  .blue {  border-radius: 100px;  background: #e6ff75;  color: #fff;  }  .green {  border-radius: 100px;  background: #75ffcd;  color: #fff;  }  .red {  border-radius: 100px;  background: #e68fba;  color: #fff;  }  .yellow {  border-radius: 100px;  background: #dfc795;  color: #fff;  }  .baberrage-stage {  position: absolute;  width: 100%;  height: 212px;  overflow: hidden;  top: 0;  margin-top: 130px;  } } </style>

关于“vue如何实现弹幕功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue
AI