vue-lottie use way

1. vue-lottie, lottie-web install
# npm i vue-lottie
# npm i lottie-web 

2. 로띠 파일을 보여줄 코드인 lottie.vue 파일을 생성해준다.

<template>
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
  import lottie from 'lottie-web';

  export default {
    props: {
      options: {
        type: Object,
        required: true
      },
      height: Number,
      width: Number,
    },

    data () {
      return {
        style: {
          width: this.width ? `${this.width}px` : '100%',
          height: this.height ? `${this.height}px` : '100%',
          overflow: 'hidden',
          margin: '0 auto'
        }
      }
    },

    mounted () {
      this.anim = lottie.loadAnimation({
          container: this.$refs.lavContainer,
          renderer: 'svg',
          loop: this.options.loop !== false,
          autoplay: this.options.autoplay !== false,
          animationData: this.options.animationData,
          rendererSettings: this.options.rendererSettings
        }
      );
      this.$emit('animCreated', this.anim)
    }
  }
</script>

출처 : https://github.com/chenqingspring/vue-lottie/blob/master/src/lottie.vue

3. 라이브러리 가이드대로 따라한다. (로띠로 이미지보여줄 json파일도 다운받아야함 https://lottiefiles.com/popular)

참고:https://www.npmjs.com/package/vue-lottie

 

조심해야할 점

data - defaultOptions: {animationData: animationData} 를 

defaultOptions: {animationData: animationData.default}로 변경해준다.

참고 : https://github.com/chenqingspring/vue-lottie/issues/20