zoukankan      html  css  js  c++  java
  • 在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>
    

      

     

     

    
    
    
    
  • 相关阅读:
    数据库01
    并发编程6
    并发编程5
    并发编程4
    并发编程3
    并发编程2
    并发编程1
    kali 下文件操作
    kali driftnet
    2017.1.1
  • 原文地址:https://www.cnblogs.com/Anne3/p/11066311.html
Copyright © 2011-2022 走看看