Vue 添加 lottie 动画

普罗旺斯.

已于 2023-06-15 21:20:49 修改

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2021-04-13 11:44:59 首次发布

本文链接：https://blog.csdn.net/qq_42700109/article/details/115658840

Vue 专栏收录该内容

10 篇文章

订阅专栏

本文档介绍了如何在Vue项目中引入和使用lottie-web库，包括通过npm安装vue-lottie，全局注册组件，引入并配置lottie动画资源，以及展示实际运行效果。关键步骤包括在main.js中导入和注册vue-lottie，从JSON文件加载动画数据，并在组件中控制动画播放。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、修改前

在这里插入图片描述

2、在vue中引入lottie

npm install --save vue-lottie

3、全局引入 vue-lottie

在 main.js 引入并注册全局组件即可，当然你也可以局部引入，我用的局部引入

import lottie from 'vue-lottie'; 

Vue.component('lottie', lottie)

4、引入你的 lottie 资源

用相关里面的代码

//相关 star
import * as animationData  from "@/assets/errorJSON/404.json";
import Lottie from 'vue-lottie'
//相关 end


export default {
  name: 'Exception404',
  
  
  //相关 star
  components:{Lottie},
  data(){
    return {
    //其中 animationData.default 是重点，之前看了好多网上教程都是没有加这个，就没有做成功，加上 default 就好了
      defaultOptions: { animationData: animationData.default },
      animationSpeed: 4,
      anim: {}
    }
  },
  methods: {
    handleAnimation: function(anim) {
      this.anim = anim;
      console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
  },
 //相关 end
 
 
  computed: {
    classes() {
      return [
        'ele-exception ele-text-center',
        {'ele-exception-dark': this.$store.state.theme.darkMode}
      ];
    },
  },
}  
</script>

5、结果

在这里插入图片描述