lottie

在vue中引入lottie非常非常简单

1.安装vue-lottie包

npm install --save vue-lottie

2.全局引入vue-lottie

在main.js引入并注册全局组件即可

1. import lottie from 'vue-lottie';

2. Vue.component('lottie', lottie)

当然也可以局部引入

3.引入你的lottie资源

1. // 第一步：script中引入资源，将ui发的json放到项目文件夹（也可以在lottie资源网站可以下载相应的资源）

2. import animationData from "../../../assets/lottie/data.json";

1. // 第二步：使用组件

2. <lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />

1. // 第三步：data里面添加相应属性

2. data(){

3. return {

4. defaultOptions: { animationData: animationData },

5. animationSpeed: 1,

6. anim: {}

7. }

8. }

1. //第四步：定义方法

2. methods: {

3. handleAnimation: function(anim) {

4. this.anim = anim;

5. console.log(anim); //这里可以看到 lottie 对象的全部属性

6. },