npm install lyric-parser

<script>
import Lyric from 'lyric-parser'
</script>

npm install better-scroll --save
// or

yarn add better-scroll

<template>
  <div ref="wrapper">
    <slot></slot>
  </div>
</template>

<script type="text/ecmascript-6">
// 引入滑动插件
import BetterScroll from 'better-scroll'

// 定义两个常量,表示水平方向
const DIRECTION_H = 'horizontal'
// 定义两个常量,表示垂直方向
const DIRECTION_V = 'vertical'
export default {
  name: 'Scroll',
  // 接受组件传参
  props: {
    probeType: {
      type: Number,
      default: 1
    },
    click: {
      type: Boolean,
      default: false
    },
    listenScroll: {
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default: null
    },
    pullup: {
      type: Boolean,
      default: false
    },
    beforeScroll: {
      type: Boolean,
      default: false
    },
    refreshDelay: {
      type: Number,
      default: 20
    },
    direction: {
      type: String,
      default: DIRECTION_V
    }
  },
  data() {
    return {

    }
  },
  watch: {
    data() {
      setTimeout(() => {
        this.refresh()
      }, this.refreshDelay)
    }
  },
  mounted() {
    setTimeout(() => {
      this.initScroll()
    }, 50)
  },
  methods: {
    // 初始化滚动
    initScroll() {
      if (!this.$refs.wrapper) {
        return
      }
      this.scroll = new BetterScroll(this.$refs.wrapper, {
        probeType: this.probeType,
        click: this.click,
        mouseWheel: true,
        eventPassthrough: this.direction === DIRECTION_V ? DIRECTION_H : DIRECTION_V
      })
      if (this.listenScroll) {
        this.scroll.on('scroll', (pos) => {
          this.$emit('scroll', pos)
        })
      }
      if (this.pullup) {
        this.scroll.on('scrollEnd', () => {
          if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
            this.$emit('scrollToEnd')
          }
        })
      }
      if (this.beforeScroll) {
        this.scroll.on('beforeScrollStart', () => {
          this.$emit('beforeScroll')
        })
      }
    },
    disable() {
      this.scroll && this.scroll.disable()
    },
    enable() {
      this.scroll && this.scroll.enable()
    },
    refresh() {
      this.scroll && this.scroll.refresh()
    },
    scrollTo() {
      this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
    },
    scrollToElement() {
      this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)
    }
  }
}
</script>

<style lang='less' scoped>
</style>

<template>
  <div class="lyric-box">
    <Scroll
      class="lyric"
      ref="lyricList"
      :data="currentLyric && currentLyric.lines"
    >
      <div class="lyric-wrapper">
        <div v-if="currentLyric">
          <p
            ref="lyricLine"
            class="lyric-text"
            v-for="(item, index) in currentLyric.lines"
            :class="currentLyricNum === index ? 'active' : ''"
            :key="index"
            @click="clickLyricPlay(item)"
          >
            {{ item.txt }}
          </p>
        </div>
        <div class="no-lyric" v-else>暂无歌词,请搜索重试</div>
      </div>
    </Scroll>
  </div>
</template>

<script>
import Scroll from '../Scroll/'
export default {
  name: 'Lyric',
  data() {
    return {

    }
  },
  props: {
    currentLyricNum: {
      type: Number
    },
    currentLyric: {
      type: Object
    }
  },
  components: {
    Scroll
  },
  mounted() {

  },
  methods: {
    // 选中某一行播放
    clickLyricPlay() {

    },

  }
}
</script>

<style lang="less" scoped>
.lyric-box {
  .lyric {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height: 460px;
    overflow: hidden;
    .lyric-wrapper {
      width: 100%;
      margin: 0 auto;
      overflow: hidden;
      .lyric-text {
        line-height: 40px;
        height: 40px;
        border-radius: 10px;
        margin: 6px 2px;
        font-size: 1.3rem;
        font-weight: 500;
        color: @color-lyric-color;
        cursor: pointer;
        text-align: center;
        &:hover {
          background: @lyric-background;
          color: @color-dark;
        }
        &.active {
          color: @color-theme;
        }
        &::after {
          color: @color-blank;
        }
      }
      .no-lyric {
        color: @color-dark;
        text-align: center;
      }
    }
  }
}
</style>

// 异步获取歌词,id是歌词id
    async getLyric(id) {
      try {
        let res = await getLyric(id)
        console.log(res)
         // this.constants.code_status是状态码，不用理会
        if (res.code === this.constants.code_status) {
          let lyric = res.lrc.lyric
          // 歌词处理，实例化一个对象，处理歌词，这里有两个参数，其实就是一个数据源和一个回调函数
          this.currentLyric = new Lyric(lyric, this.lyricHandle)
          // 判断歌曲是否准备好进行播放
          if (this.isPureMusic) {
             // 使用正则表达式处理，然后返回playingLyric，这就是处理之后的歌词
            this.playingLyric = this.currentLyric.lrc.replace(
              /\[(\d{2}):(\d{2}):(\d{2})\]/g,
              ''
            )
          } else {
            if (this.playing && this.canLyricPlay) {
              this.currentLyric.seek(this.currentTime * 1000)
            }
          }
        }
      } catch (error) {
        this.currentLyric = null
        this.playingLyric = ''
        this.currentLyricNum = 0
      }
    },

// 歌词的回调以及歌词在某一个位子固定
    lyricHandle({ lineNum, txt }) {
       //判断组件实例对象是否存在
      if (!this.$refs.lyricRef.$refs.lyricList) {
        return
      }
      // 歌词的行数
      this.currentLyricNum = lineNum
      // 返回的歌词
      this.playingLyric = txt
      // 判断当前歌词行数是否大于5，其实是第六行，然后当歌词滚动到第六行之后不再向下滚动，也是实现歌词高亮的一种效果，就是操作虚拟don来实现的，
      // 这里为什么是有两个$refs,是由于这个是涉及到三个组件之间的dom。
      if (lineNum > 5) {
        let line = this.$refs.lyricRef.$refs.lyricLine[lineNum - 5]
        if (this.$refs.lyricRef.$refs.lyricList) {
          this.$nextTick(() => {
            this.$refs.lyricRef.$refs.lyricList.scrollToElement(line, 1000)
          })
        }
      } else {
        if (this.$refs.lyricRef.$refs.lyricList) {
          this.$nextTick(() => {
            this.$refs.lyricRef.$refs.lyricList.scrollTo(0, 0, 1000)
          })
        }
      }
    },