vue3中使用弹幕组件vue-danmaku

在这里插入图片描述

1、最开始使用的是vue3-marquee,后面发现一直有一个bug无法解决,就是鼠标hover到第一个弹幕上字体就会变粗,已经提了issue给作者,但是目前还未答复,所以就换了方案。

地址如下:
https://github.com/megasanjay/vue3-marquee

2、后面就开始使用了,这个应该是国内开发者开发的:
vue-danmaku

3、使用感受:

因为我们的弹幕要求多行,使用vue-danmaku还是挺方便的,
可以通过channels来设置。
在这里插入图片描述
实例代码:

  <danmaku ref="danmakuRef" v-model:danmus="danmus" 
    :speeds="40"    useSlot loop :channels="2" style="height:900px; width:800px;">
    <template v-slot:dm="{ index, danmu }">
        <div @mouseenter="handleEnter"
        @mouseleave="handleLeave"
        @click='handleClick(danmu)'
        class="img_style">
        <span>{{ index }}{{ danmu.name }}{{ danmu.text }}</span>
        </div>
    </template>
  </danmaku>

import danmaku from 'vue3-danmaku'

若想实现循环播放可通过play-end 回调 加 play来实现,即所有弹幕播放完成(已滚出屏幕)时重新开启播放。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/764048.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

同时安装JDK8和JDK17+环境变量默认无法修改

一、问题描述 当在windows系统中&#xff0c;同时安装JDK8和JDK17&#xff0c;环境变量默认就为jdk17&#xff0c;且从jdk17切换为jdk8后不生效&#xff0c;使用"java -version"命令查看后还是17版本。 解决方法 首先&#xff0c;产生的原因是&#xff0c;在安装…

【高性能服务器】多进程并发模型

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 对于常见的C/S模型…

MySQL 9.0创新版发布!功能又进化了!

作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、MySQL、PG、高斯及Greenplum备份恢复&#xff0c; 安装迁移&#xff0c;性能优化、故障…

【ARM系列】1of N SPI

1 of N模式 SPI 概述配置流程 概述 GIC-600AE支持1 of N模式SPI。在此模式下可以将SPI target到多个core&#xff0c;并且GIC-600AE可以选择哪些内核接收SPI。 GIC-600AE只向处于powered up 并且使能中断组的core发送SPI。 GIC-600AE会优先考虑那些被认为是active的核&#xf…

如何利用Stable Diffusion在AI绘画领域赚钱,(附详细教程)小白兼职必看!

前言 AIGC 现已成为内容生产的引擎&#xff0c;正为内容创作领域带来前所未有的变革。它不仅能够在文本、图像、视频、音频等单一模态上生成内容&#xff0c;更能实现跨模态的生成&#xff0c;打通了多模态间的壁垒。 对于“普通人”来说&#xff0c;理解并有效的学会利用 AI…

方法重载与重写的区别

1.方法重载和重写都是实现多态的方式&#xff0c;区别在于重载是编译时多态&#xff0c;重写是运行时多态。 2.重载是在同一个类中&#xff0c;两个方法的方法名相同&#xff0c;参数列表不同&#xff08;参数类型、顺序、个数&#xff09;&#xff0c;与方法返回值无关&#x…

电路里电源不仅仅是电源

电源往往被认为是直流控制电路中重要的考虑因素之一——但我们也不能忽视其他关键因素&#xff1a;电源滤波器、转换器和备用电源模块。 输入电源是任何电气控制系统的基本配置。没有电源&#xff0c;就没有传感器、控制器、负载设备&#xff0c;什么都没有。因此&#xff0c;…

windows下搭建python+jupyter notebook

一.下载python 下面网址下载python3 https://www.python.org/ 二. 安装jupyter notebook 三. 修改配置 四. 检测是否正常运行

夸克网盘拉新暑期大涨价!官方授权渠道流程揭秘

夸克网盘拉新暑期活动来袭&#xff0c;价格大涨&#xff01;从7月1日开始持续两个月&#xff0c;在这两个月里夸克网盘拉新的移动端用户&#xff0c;一个从原来的5元涨到了10元。这对做夸克网盘拉新的朋友来说&#xff0c;真的是福利的。趁着暑期时间多&#xff0c;如果有想做夸…

【工具推荐】Clink

文章目录 Clink介绍Clink安装删除版权信息 Clink介绍 Clink 是一个工具&#xff0c;它将 GNU Readline 库的强大命令行编辑功能与 Windows 原生的 cmd.exe 命令提示符结合在一起。Readline 是 Bash shell 中众所周知的库&#xff0c;Bash 是许多 Linux 发行版的标准 shell。通…

【高性能服务器】多线程并发模型

&#x1f525;博客主页&#xff1a; 我要成为C领域大神&#x1f3a5;系列专栏&#xff1a;【C核心编程】 【计算机网络】 【Linux编程】 【操作系统】 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 本博客致力于知识分享&#xff0c;与更多的人进行学习交流 ​​ 对于常见的C/…

C语言使用先序遍历创建二叉树

#include<stdio.h> #include<stdlib.h>typedef struct node {int data;struct node * left;struct node * right; } Node;Node * createNode(int val); Node * createTree(); void freeTree(Node * node);void preOrder(Node * node);// 先序创建二叉树 int main()…

猫头虎博主全栈前沿AI技术领域矩阵社群

猫头虎博主全栈前沿AI技术领域矩阵社群 &#x1f44b;大家好&#xff0c;我是猫头虎&#xff01;今天我要向大家介绍一个非常重要的社群矩阵——专为全栈前沿AI技术领域的朋友们打造的各种技术交流和资源互助的社群。这些社群不仅能帮助大家快速提升技术水平&#xff0c;还能拓…

【数据结构与算法】堆排序算法原理与实现:基于堆实现的高效排序算法

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;《数据结构与算法》 期待您的关注 ​ 目录 一、引言 堆排序的简介 堆排序的特点 二、堆的概念 三、堆排序算法的原理 四、堆…

MySQL 9.0 悄悄上线,支持面向AI的向量数据库

MySQL狂热粉丝群已经发现MySQL官网上MySQL9.0这两天悄然上线&#xff0c;已经可以下载体验了&#xff0c;目前被定义为创新版本&#xff08;Innovation&#xff09;。 下载地址&#xff1a;https://dev.mysql.com/downloads/mysql/ 支持主流的操作系统&#xff0c;安装后可以直…

H5漂流瓶交友源码_社交漂流瓶H5源码

简介&#xff1a; 一种流行的娱乐性社交新潮流&#xff0c;年轻人玩得比较多。和盲盒有点类似 社交漂流瓶搭建教程 环境&#xff1a;Nginx 1.20.1-MySQL 5.6.50-PHP-7.3 上传源码至网站根目录&#xff0c;创建并导入数据库 数据库信息修改&#xff1a;/config/database.ph…

TCP 的安全可靠

TCP的安全可靠 重传机制往返时间测量快速重传 流量控制拥塞控制 重传机制 T C P确认从另一端收到的数据以提供可靠的运输层&#xff0c;但数据和确认都有可能会丢失。 T C P通过在发送时设置一个定时器来解决这种问题。如果当定时器溢出时还没有收到确认&#xff0c;它就重传该…

7.2.SQL注入-基于函数报错extractvalue(),floor()

注入基于函数报错extractvalue(),floor()-字符型 基于extractvalue() 爆出数据库版本payload语句&#xff1a; kobe and extractvalue(0,concat(0x7e,version()))#爆出数据库版本 基于floor() floor()函数就是取整数 爆出数据版本信息 kobe and (select 2 from (select …

深度解密Spark性能优化之道

课程介绍 课程通过实战案例解析和性能调优技巧的讲解&#xff0c;帮助学员提升大数据处理系统的性能和效率。课程内容涵盖了Spark性能调优的各个方面&#xff0c;包括内存管理、并行度设置、数据倾斜处理、Shuffle调优、资源配置等关键技术和策略。学员将通过实际案例的演示和…

【Altium】如何处理PCB上所有焊盘被误盖油

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决焊盘被误盖油的操作 2、 问题场景 所有焊盘都可以设置为盖油或不盖油&#xff0c;由于焊盘需要用来焊接元器件&#xff0c;所以都不会设置盖油。由于误操作或者创建封装时设置错误&#xff0c;造成一定数量的焊盘…