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