如何在vue里添加好看的lottie动画

发布时间：2020-12-17 02:15:28 所属栏目：百科来源：网络整理

导读：p style="text-align: center" 引入lottie库（ >. 在vue中引入lottie非常非常简单 1.安装vue-lottie包 npm install --save vue-lottie 2.全局引入vue-lottie 在main.js引入并注册全局组件即可当然你也可以局部引入 ~ o ~ 3.引入你的lottie资源在文中顶部l

引入lottie库（ >.< ）

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

1.安装vue-lottie包

npm install --save vue-lottie

2.全局引入vue-lottie

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

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

3.引入你的lottie资源

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

// 第二步：使用组件

// 第三步：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动画。编程之家 52php.cn 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!