在vue中使用lottie

 

在普通h5中使用Bodymovin和Lottie网上的教程有很多，导出data.json后引入lottie.js就可以了

尝试在vue中使用时，参考https://github.com/chenqingspring/vue-lottie

不知道其他人使用怎样，自己直接全部拷贝会出错，找不到lottie.vue的错，及数据上的错误，同样会报错的话可以尝试下。

以下为自己修改了一点的使用方法

1.npm install --save vue-lottie

 

2.官网代码修改以下两处：

为：

 

 代码如下：

<template>
    <div id="app">
        <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>
    </div>
</template>

<script>
    import Lottie from 'vue-lottie';
    import * as animationData from './assets/data.json';

    export default {
        name: 'app',
        components: {
            'lottie': Lottie
        },
        data() {
            return {
                defaultOptions: {animationData: animationData.default},
            }
        },
        methods: {
            handleAnimation: function (anim) {
                this.anim = anim;
            }
        }
    }
</script>