Lottie使用

最新推荐文章于 2024-02-23 22:06:55 发布

DiD徐昊

最新推荐文章于 2024-02-23 22:06:55 发布

阅读量150

点赞数

文章标签： javascript vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/qq_62816576/article/details/129688000

版权

本文展示了如何在Vue.js应用中创建一个自定义的Lottie动画组件，通过npm安装lottie-web模块，并在组件中导入和使用。在组件中定义了接收动画数据和配置的props，然后在mounted生命周期钩子中加载动画。同时，在main.js中全局注册lottie组件以便其他组件使用，并提供了在目标组件中如何引入和配置json动态图的例子。

摘要由CSDN通过智能技术生成

在componts下定义一个lottie组件lottie.vue

下载 lottie-web模块 npm install lottie-web --save

<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div :style="style" ref="lavContainer"></div>
</template>
 
<script>
//引入模块
import lottie from 'lottie-web'
export default {
  props: {
    options: {
      type: Object,
      required: true
    },
    height: Number,
    width: Number
  },
  data() {
    return {
      style: {
        width: this.width ? `${this.width}rem` : '100%',
        height: this.height ? `${this.height}rem` : '100%',
        overflow: 'hidden',
        margin: '0 auto'
      }
    }
  },
  mounted() {
    this.anim = lottie.loadAnimation({
          container: this.$refs.lavContainer,
          renderer: 'svg',
          loop: this.options.loop !== false,
          autoplay: this.options.autoplay !== false,
          animationData: this.options.animationData,
          rendererSettings: this.options.rendererSettings
        }
    )
    this.$emit('animCreated', this.anim)
  }
}
</script>

在main.js中全局定义lottie组件 ( 不在全局定义lottie.vue组件时可以忽略此步骤 )

// npm install vue-lottie --save
import lottie from 'vue-lottie'

Vue.component('lottieView',lottie);

在目的组件使用json动态图

<template>
      <lottie :options="defaultOptions" :height="6.45" :width="5.1" class="lottie"/>
</template>


<script>
// 引入组件
import Lottie from '@/components/lottie.vue';
// 引入json数据
import  loading  from '@/assets/josn/loading.json';

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {
        HeaderView,
        lottie: Lottie,
    },

    data() {
        //这里存放数据
        return {
            // 动图
            defaultOptions:{animationData:loading,loop:true,autoplay:true},
            
        };
    },
  
   
}
</script>