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>
    

      

     

     

    
    
    
    
  • 相关阅读:
    chr(9) chr(10) chr(13) chr(32)
    分割字符串
    日期提取函数EXTRACT
    数据泵在本地导出数据到远程数据库中
    CEIL与FLOOR
    GROUPING SETS与GROUP_ID
    LISTAGG
    AVG
    COUNT
    Scala 泛型类型和方法
  • 原文地址:https://www.cnblogs.com/Anne3/p/11066311.html
Copyright © 2011-2022 走看看