LuXinZ / vue-lyric-scroll

vue lyric scroll

install

npm install vue-lyric-scroll -S

usage

Demo File

Demo Online

• Local Registration

// some component
<template>
  <LyricScroll :lyric="lyric" :current-time="currentTime" />
</template>
<script>
import LyricScroll from 'vue-lyric-scroll'
export default {
  components: {
    LyricScroll,
  },
  data: () => ({
    lyric: { 0: 'hello', 1: 'world' },
    currentTime: 0,
  }),
}
//...
</script>

• Global Registration

// your entry js
import Vue from 'vue'
import LyricScroll from 'vue-lyric-scroll'
Vue.use(LyricScroll)
//...

Attributes

参数 ( Attribute )	说明 ( Description )	类型 ( Type )	默认值 ( Default )	例子 ( i.e. )
lyric	歌词对象，键是歌词开始时间字符串，值是对应的歌词	Object	required	{0: '你好', 2: '世界'}
currentTime	当前的播放时间	Number	required	52
tLyric	翻译的歌词对象	Object	null	{0: 'hello', 2: 'world'}
lyricActiveClass	当前唱到的歌词类名	String	''	'lyric-active'
lyricCenterClass	拖拽时中间歌词类名	String	''	'lyric-center'
lyricScrollTime	滚动到目标歌词时间，单位 ms	Number	400
dragendWaitTime	拖拽结束后隔多长后恢复滚动，单位 ms	Number	3000
lyricMargin	每句歌词及翻译与下一句歌词及翻译的间隔	String	'20px'
lyricLineheight	每句歌词及翻译行高	String	'1.5em'
triangleColor	拖拽时左边出现的三角形颜色	String	'orange'
triangleWidth	拖拽时左边出现的三角形宽度	String	'20px'
centerLineColor	拖拽时中间线的颜色	String	'#ccc'
centerTimeColor	拖拽时中间歌词开始时间颜色	String	'orange'