如何在vue里添加好看的lottie动画
更新时间：2018年08月02日 17:09:47 作者：肥猫Charles
这篇文章主要介绍了在vue里添加好看的lottie动画效果的方法，在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";
// 第二步：使用组件
<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作者的github地址
总结
以上所述是小编给大家介绍的在vue里添加好看的lottie动画，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
这篇文章主要介绍了vue中el-checkbox全选、反选、多选的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
Vue3中使用Proxy实现数据劫持,解决了Vue2中数组和对象劫持的遗留问题,Proxy可以修改某些操作的默认行为,通过get和set方法实现数据的劫持和保护机制,感兴趣的朋友跟随小编一起看看吧2024-11-11
这篇文章主要介绍了vue2中引用better-scroll和使用 better-scroll的方法，使用时有三个要点及注意事项在文中给大家详细介绍 ,需要的朋友可以参考下2018-11-11
vue3中template使用ref无需.value原因解析
vue3的template中使用ref变量无需使用.value,还可以在事件处理器中进行赋值操作时,无需使用.value就可以直接修改ref变量的值,这篇文章主要介绍了原来vue3中template使用ref无需.value是因为这个,需要的朋友可以参考下2024-06-06
下面小编就为大家分享一篇使用vue-router设置每个页面的title方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-02-02
这篇文章主要介绍了Vue命令式组件的编写与应用小结,在这篇文章中,我会带你了解命令式组件的基本概念,并通过一些简单的示例来展示它们是如何工作的,需要的朋友可以参考下2024-03-03
这篇文章主要介绍了vue构建动态表单的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在开发Vue应用时,我们经常需要在多个组件中复用一些通用的函数或方法,这些函数可能是我们自己编写的工具函数,也可能是从第三方库中导入的,下面我们就来看看如何正确引用和使用外部方法吧2024-01-01
这篇文章主要介绍了VUE记账凭证模块组件的实例代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-03-03
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
这篇文章主要介绍了Vue图片浏览组件v-viewer用法,结合实例形式分析了v-viewer的基本功能与使用方法,包括旋转、缩放、翻转等操作技巧,需要的朋友可以参考下2019-11-11
最新评论