1.0.5 • Published 4 years ago

vue-lyric-scroll v1.0.5

Weekly downloads
8
License
MIT
Repository
github
Last release
4 years ago

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歌词对象,键是歌词开始时间字符串,值是对应的歌词Objectrequired{0: '你好', 2: '世界'}
currentTime当前的播放时间Numberrequired52
tLyric翻译的歌词对象Objectnull{0: 'hello', 2: 'world'}
lyricActiveClass当前唱到的歌词类名String'''lyric-active'
lyricCenterClass拖拽时中间歌词类名String'''lyric-center'
lyricScrollTime滚动到目标歌词时间,单位 msNumber400
dragendWaitTime拖拽结束后隔多长后恢复滚动,单位 msNumber3000
lyricMargin每句歌词及翻译与下一句歌词及翻译的间隔String'20px'
lyricLineheight每句歌词及翻译行高String'1.5em'
triangleColor拖拽时左边出现的三角形颜色String'orange'
triangleWidth拖拽时左边出现的三角形宽度String'20px'
centerLineColor拖拽时中间线的颜色String'#ccc'
centerTimeColor拖拽时中间歌词开始时间颜色String'orange'
1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

0.0.1

6 years ago

1.0.0

6 years ago