vue弹幕实现暂停
实现 Vue 弹幕暂停功能
监听播放状态
通过 v-model 或自定义事件绑定弹幕组件的播放状态，存储一个布尔值（如 isPlaying）控制播放与暂停。在弹幕滚动逻辑中根据该状态判断是否更新位置。
控制动画或定时器
若使用 CSS 动画实现弹幕移动，可通过动态切换类名暂停动画：
<div :class="['danmu-item', { 'pause-animation': !isPlaying }]"></div>.pause-animation {
animation-play-state: paused;
}若通过 JavaScript 定时器控制，需在暂停时清除定时器：
let timer;
function startMove() {
if (this.isPlaying) {
timer = requestAnimationFrame(this.updatePosition);
}
}
function stopMove() {
cancelAnimationFrame(timer);
}保存弹幕位置
暂停时记录当前弹幕的位移进度（如 translateX 值），恢复播放时从该位置继续滚动。可通过 data 属性或 ref 存储状态：
data() {
return {
currentPosition: 0
};
},
methods: {
updatePosition() {
if (this.isPlaying) {
this.currentPosition += 1;
}
}
}组件方法暴露
通过 ref 或 $emit 提供外部控制接口：
// 父组件调用
<template>
<danmu-component ref="danmu" />
<button @click="$refs.danmu.togglePlay()">暂停/播放</button>
</template>// 子组件方法
methods: {
togglePlay() {
this.isPlaying = !this.isPlaying;
if (this.isPlaying) this.startMove();
}
}性能优化
大量弹幕时，暂停期间可移除不可见弹幕的 DOM 节点，恢复时重新渲染。使用 v-if 结合 isPlaying 控制渲染：
<div v-if="isPlaying || isVisible"></div>
