hellodigua / vue-danmaku

基于 Vue 的弹幕交互组件 | A danmaku component for Vue
https://hellodigua.github.io/vue-danmaku
MIT License
620 stars 60 forks source link

希望增加一个悬停的功能 #24

Closed admin8756 closed 2 years ago

admin8756 commented 2 years ago

问题

请在此描述你的问题

代码实现

在此附上你遇到问题的代码或代码截图。

环境

hellodigua commented 2 years ago

下个版本加,预计在元旦发布

admin8756 commented 2 years ago

哇。期待~感谢回复

hellodigua commented 2 years ago

抱歉,最近比较忙,遇到了点问题,所以可能要晚会发布 @admin8756 但是悬停其实很简单,你可以给vue-danmaku绑定一个ref,然后去监听它的mouse事件,大概是这样子,你可以试试:

    initEvents() {
      this.$refs.danmaku.addEventListener(
        'mousemove',
        throttle((e) => {
          if (!e.target.className.includes('dm')) return
          e.target.classList.add('pause')
        }, 300)
      )
      this.$refs.danmaku.addEventListener(
        'mouseout',
        throttle((e) => {
          if (!e.target.className.includes('dm')) return
          e.target.classList.remove('pause')
        }, 100)
      )
    },
admin8756 commented 2 years ago

ok。我晚点试试。但是。我需要的是单个弹幕的悬停。我看您这个方法似乎是给整个弹幕增加了一个pause的class。所以我的想法是利用hove的class。直接停止。今晚我来尝试一下。如果可以。我将share我的代码。

hellodigua commented 2 years ago

这段代码就是单个弹幕的悬停,用的事件代理 @admin8756

admin8756 commented 2 years ago

噢噢。好。我试一下。晚点给答复哦。

JIAOBANTANG commented 2 years ago

希望加个无限播放功能

hellodigua commented 2 years ago

希望加个无限播放功能

@JIAOBANTANG loop 参数不能满足要求吗

hellodigua commented 2 years ago

@admin8756 已在1.4.1版本支持该功能