vue 封装 lottie-web

<template>
  <div ref="lottieBox"></div>
</template>

<script>
import lottie from 'lottie-web'
// throttle 返回一个新的函数，新函数节流限制一定时间内一个函数可调用的最大次数。 如“每X毫秒最多执行一次该功能”。
import { throttle } from 'quasar'

export default {
  name: 'lottie-web-cimo',
  data () {
    return {
      lottie: {}
    }
  },
  props: ['animationData', 'path', 'loop', 'animationSpeed'],
  methods: {

    stop: function () {
      this.lottie.stop()
    },

    play: function () {
      this.lottie.play()
    },

    pause: function () {
      this.lottie.pause()
    },

    onSpeedChange: function () {
      this.lottie.setSpeed(this.animationSpeed)
    },

    isLottieFinish: function (e) {
      this.$emit('isLottieFinish', e)
    },

    initLottie: function () {
      this.lottie = lottie.loadAnimation({
        container: this.$refs.lottieBox,
        renderer: 'svg',
        loop: this.loop || true,
        animationData: this.animationData,
        // 如果需要用到路径请求，请使用 path ，lottie 如果 animationData 为空 ，则自动选择 path
        path: this.path
      })
      this.lottie.addEventListener('data_ready', () => { this.isLottieFinish(true) })
    }

  },
  created () {
    this.initLottie = throttle(this.initLottie, 1000)
  },
  mounted () {
    this.initLottie()
  },
  watch: {
    animationSpeed: function (n, o) {
      this.onSpeedChange()
    }
  }
}
</script>

使用

<lottie-web-cimo
  ref="lottie_web"
  :path="defaultOptions.path"
  :loop="defaultOptions.loop"
  :animation-speed="defaultOptions.animationSpeed"
  @isLottieFinish="handleLottieFinish"
  />

<script>
import LottieWebCimo from '../../components/lottie-web-cimo/lottie-web-cimo'

export default {
  ...
  components: { LottieWebCimo },
  data () {
    return {
      defaultOptions: {
        path: 'https://assets1.lottiefiles.com/packages/lf20_gzl797gs.json',
        loop: true,
        animationSpeed: 1
      }
    }
  },
  // 定义方法
  methods: {
    play () {
      this.$refs.lottie_web.play()
    },
    stop () {
      this.$refs.lottie_web.stop()
    },
    pause () {
      this.$refs.lottie_web.pause()
    },
    handleLottieFinish (isFinish) {
      // 事件处理
    }
  }
}
</script>