如何在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動畫，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
vue3使用elementPlus進行table合并處理的示例詳解
虛擬數(shù)據中公司下有多個客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進行展示,所以本文給大家介紹了vue3使用elementPlus進行table合并處理的實例,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-02-02
一文教會你搭建vite項目并配置路由和element-plus
由于項目搭建過程實在繁瑣,容易遺忘,每次新建項目還得百度一下怎么搭建,所以寫下本文提醒自己,下面這篇文章主要給大家介紹了關于搭建vite項目并配置路由和element-plus的相關資料,需要的朋友可以參考下2022-07-07
解決vue?app.js/vender.js過大優(yōu)化啟動頁
這篇文章主要為大家介紹了解決vue?app.js/vender.js過大優(yōu)化啟動頁過程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
Vue實現(xiàn)dom元素拖拽并限制移動范圍的操作代碼
這篇文章主要介紹了Vue實現(xiàn)dom元素拖拽并限制移動范圍的操作代碼,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-12-12
vue-calendar-component 封裝多日期選擇組件的實例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要介紹了vue 實現(xiàn)超長文本截取,懸浮框提示，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue.js中一個很重要的知識點是組件通信,不管是業(yè)務類的開發(fā)還是組件庫開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關于Vue3常用的通訊方式的相關資料,需要的朋友可以參考下2022-05-05
如何解決npm i下載依賴的時候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時候出現(xiàn)某依賴版本沖突問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了vue router-view嵌套顯示，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
vue引入微信sdk 實現(xiàn)分享朋友圈獲取地理位置功能
這篇文章主要介紹了h5 vue引入微信sdk 實現(xiàn)分享朋友圈，分享給朋友，獲取地理位置功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07