新增歌词区域触摸板、鼠标滚轮等对歌词滚动的支持
							parent
							
								
									48cfebd5ae
								
							
						
					
					
						commit
						9cebaa0d97
					
				| 
						 | 
				
			
			@ -1,5 +1,5 @@
 | 
			
		|||
<template lang="pug">
 | 
			
		||||
div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" :style="lrcStyles" @mousedown="handleLyricMouseDown" ref="dom_lyric")
 | 
			
		||||
div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" :style="lrcStyles" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
 | 
			
		||||
  div(:class="$style.lyricSpace")
 | 
			
		||||
  div(v-for="(info, index) in lyricLines" :key="index" :class="[$style.lineContent, lyric.line == index ? (lrcConfig.style.isZoomActiveLrc ? $style.lrcActiveZoom : $style.lrcActive) : null]")
 | 
			
		||||
    p(:class="$style.lrcLine") {{info.text}}
 | 
			
		||||
| 
						 | 
				
			
			@ -238,6 +238,16 @@ export default {
 | 
			
		|||
        this.handleScrollLrc()
 | 
			
		||||
      }, 3000)
 | 
			
		||||
    },
 | 
			
		||||
    handleWheel(event) {
 | 
			
		||||
      // console.log(event.deltaY)
 | 
			
		||||
      if (!this.lyricEvent.isStopScroll) this.lyricEvent.isStopScroll = true
 | 
			
		||||
      if (cancelScrollFn) {
 | 
			
		||||
        cancelScrollFn()
 | 
			
		||||
        cancelScrollFn = null
 | 
			
		||||
      }
 | 
			
		||||
      this.$refs.dom_lyric.scrollTop = this.$refs.dom_lyric.scrollTop + event.deltaY
 | 
			
		||||
      this.startLyricScrollTimeout()
 | 
			
		||||
    },
 | 
			
		||||
    clearLyricScrollTimeout() {
 | 
			
		||||
      if (!this.lyricEvent.timeout) return
 | 
			
		||||
      clearTimeout(this.lyricEvent.timeout)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -29,7 +29,7 @@
 | 
			
		|||
          ul
 | 
			
		||||
 | 
			
		||||
      div(:class="$style.right")
 | 
			
		||||
        div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @mousedown="handleLyricMouseDown" ref="dom_lyric")
 | 
			
		||||
        div(:class="[$style.lyric, lyricEvent.isMsDown ? $style.draging : null]" @wheel="handleWheel" @mousedown="handleLyricMouseDown" ref="dom_lyric")
 | 
			
		||||
          div(:class="$style.lyricSpace")
 | 
			
		||||
          p(v-for="(info, index) in lyricLines" :key="index" :class="lyric.line == index ? $style.lrcActive : null") {{info.text}}
 | 
			
		||||
          div(:class="$style.lyricSpace")
 | 
			
		||||
| 
						 | 
				
			
			@ -301,6 +301,16 @@ export default {
 | 
			
		|||
        this.handleScrollLrc()
 | 
			
		||||
      }, 3000)
 | 
			
		||||
    },
 | 
			
		||||
    handleWheel(event) {
 | 
			
		||||
      console.log(event.deltaY)
 | 
			
		||||
      if (!this.lyricEvent.isStopScroll) this.lyricEvent.isStopScroll = true
 | 
			
		||||
      if (cancelScrollFn) {
 | 
			
		||||
        cancelScrollFn()
 | 
			
		||||
        cancelScrollFn = null
 | 
			
		||||
      }
 | 
			
		||||
      this.$refs.dom_lyric.scrollTop = this.$refs.dom_lyric.scrollTop + event.deltaY
 | 
			
		||||
      this.startLyricScrollTimeout()
 | 
			
		||||
    },
 | 
			
		||||
    clearLyricScrollTimeout() {
 | 
			
		||||
      if (!this.lyricEvent.timeout) return
 | 
			
		||||
      clearTimeout(this.lyricEvent.timeout)
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue