在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>