Vue 添加 lottie 动画

文章目录

• 1、修改前
• 2、在vue中引入lottie
• 3、全局引入 vue-lottie
• 4、引入你的 lottie 资源
• 5、结果

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

5、结果