怎样在vue里添加好看的lottie动画

小编给大家分享一下怎样在vue里添加好看的lottie动画，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！

创新互联-专业网站定制、快速模板网站建设、高性价比丰都网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式丰都网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖丰都地区。费用合理售后完善，10多年实体公司更值得信赖。

 

引入lottie库 （ >.< ）

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

1.安装vue-lottie包

npm install --save vue-lottie

2.全局引入vue-lottie

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

import lottie from 'vue-lottie';
Vue.component('lottie', lottie)

当然你也可以局部引入 ~ o ~

3.引入你的lottie资源

在文中顶部lottie资源网站可以下载相应的资源，下载下来的文件保存到项目的文件夹下

// 第一步：script中引入资源
import * as animationData from "../assets/lottie/loading.json";

// 第二步：使用组件
<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />

// 第三步：data里面添加相应属性
data(){
  return {
    defaultOptions: { animationData: animationData },
    animationSpeed: 1,
    anim: {}
  }
}

//第四步：定义方法
methods: {
  handleAnimation: function(anim) {
    this.anim = anim;
    console.log(anim); //这里可以看到 lottie 对象的全部属性
  },
}

看完了这篇文章，相信你对“怎样在vue里添加好看的lottie动画”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！

标题名称：怎样在vue里添加好看的lottie动画
转载来源：https://www.cdcxhl.com/article28/gpjijp.html

成都网站建设公司_创新互联，为您提供全网营销推广、关键词优化、ChatGPT、定制开发、网页设计公司、建站公司

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联