引入 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 地址
https://github.com/chenqingspring/vue-lottie
总结
以上所述是小编给大家介绍的在 vue 里添加好看的 lottie 动画, 希望对大家有所帮助, 如果大家有任何疑问请给我留言, 小编会及时回复大家的. 在此也非常感谢大家对脚本之家网站的支持!
来源: http://www.jb51.net/article/144969.htm