如何在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資源網(wǎng)站可以下載相應的資源，下載下來的文件保存到項目的文件夾下
// 第一步：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地址
總結(jié)
以上所述是小編給大家介紹的在vue里添加好看的lottie動畫，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue中el-checkbox全選、反選、多選的實現(xiàn)
這篇文章主要介紹了vue中el-checkbox全選、反選、多選的實現(xiàn)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue3中的數(shù)據(jù)劫持的最新實現(xiàn)方案的proxy示例詳解
Vue3中使用Proxy實現(xiàn)數(shù)據(jù)劫持,解決了Vue2中數(shù)組和對象劫持的遺留問題,Proxy可以修改某些操作的默認行為,通過get和set方法實現(xiàn)數(shù)據(jù)的劫持和保護機制,感興趣的朋友跟隨小編一起看看吧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設(shè)置每個頁面的title方法
下面小編就為大家分享一篇使用vue-router設(shè)置每個頁面的title方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了Vue命令式組件的編寫與應用小結(jié),在這篇文章中,我會帶你了解命令式組件的基本概念,并通過一些簡單的示例來展示它們是如何工作的,需要的朋友可以參考下2024-03-03
這篇文章主要介紹了vue構(gòu)建動態(tài)表單的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在開發(fā)Vue應用時,我們經(jīng)常需要在多個組件中復用一些通用的函數(shù)或方法,這些函數(shù)可能是我們自己編寫的工具函數(shù),也可能是從第三方庫中導入的,下面我們就來看看如何正確引用和使用外部方法吧2024-01-01
這篇文章主要介紹了VUE記賬憑證模塊組件的實例代碼，代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03
Vue圖片瀏覽組件v-viewer用法分析【支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作】
這篇文章主要介紹了Vue圖片瀏覽組件v-viewer用法,結(jié)合實例形式分析了v-viewer的基本功能與使用方法,包括旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作技巧,需要的朋友可以參考下2019-11-11