大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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

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

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

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

引入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";

// 第二步:使用组件


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

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

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


名称栏目:怎样在vue里添加好看的lottie动画
当前链接:http://dzwzjz.com/article/gpjijp.html
在线咨询
服务热线
服务热线:028-86922220
TOP