如何在vue里添加好看的lottie動(dòng)畫
引入lottie庫(kù) （ >.< ）
在vue中引入lottie非常非常簡(jiǎn)單
1.安裝vue-lottie包
npm install --save vue-lottie
2.全局引入vue-lottie
在main.js引入并注冊(cè)全局組件即可
import lottie from 'vue-lottie';
Vue.component('lottie', lottie)
當(dāng)然你也可以局部引入 ~ o ~
3.引入你的lottie資源
在文中頂部lottie資源網(wǎng)站可以下載相應(yīng)的資源，下載下來(lái)的文件保存到項(xiàng)目的文件夾下
// 第一步：script中引入資源
import * as animationData from "../assets/lottie/loading.json";
// 第二步：使用組件
<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />
// 第三步：data里面添加相應(yīng)屬性
data(){
return {
defaultOptions: { animationData: animationData },
animationSpeed: 1,
anim: {}
}
}
//第四步：定義方法
methods: {
handleAnimation: function(anim) {
this.anim = anim;
console.log(anim); //這里可以看到 lottie 對(duì)象的全部屬性
},
}
最后貼上vue-lottie作者的github地址
總結(jié)
以上所述是小編給大家介紹的在vue里添加好看的lottie動(dòng)畫，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
vue3使用elementPlus進(jìn)行table合并處理的示例詳解
虛擬數(shù)據(jù)中公司下有多個(gè)客戶,公司一樣的客戶,公司列需要合并,客戶如果一樣也需要合并進(jìn)行展示,所以本文給大家介紹了vue3使用elementPlus進(jìn)行table合并處理的實(shí)例,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-02-02
一文教會(huì)你搭建vite項(xiàng)目并配置路由和element-plus
由于項(xiàng)目搭建過(guò)程實(shí)在繁瑣,容易遺忘,每次新建項(xiàng)目還得百度一下怎么搭建,所以寫下本文提醒自己,下面這篇文章主要給大家介紹了關(guān)于搭建vite項(xiàng)目并配置路由和element-plus的相關(guān)資料,需要的朋友可以參考下2022-07-07
解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)
這篇文章主要為大家介紹了解決vue?app.js/vender.js過(guò)大優(yōu)化啟動(dòng)頁(yè)過(guò)程詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)dom元素拖拽并限制移動(dòng)范圍的操作代碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-12-12
vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
這篇文章主要介紹了vue-calendar-component 封裝多日期選擇組件,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
vue 實(shí)現(xiàn)超長(zhǎng)文本截取,懸浮框提示
這篇文章主要介紹了vue 實(shí)現(xiàn)超長(zhǎng)文本截取,懸浮框提示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
Vue.js中一個(gè)很重要的知識(shí)點(diǎn)是組件通信,不管是業(yè)務(wù)類的開發(fā)還是組件庫(kù)開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關(guān)于Vue3常用的通訊方式的相關(guān)資料,需要的朋友可以參考下2022-05-05
如何解決npm i下載依賴的時(shí)候出現(xiàn)某依賴版本沖突
這篇文章主要介紹了如何解決npm i 下載依賴的時(shí)候出現(xiàn)某依賴版本沖突問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue router-view的嵌套顯示實(shí)現(xiàn)
本文主要介紹了vue router-view嵌套顯示，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-07-07
vue引入微信sdk 實(shí)現(xiàn)分享朋友圈獲取地理位置功能
這篇文章主要介紹了h5 vue引入微信sdk 實(shí)現(xiàn)分享朋友圈，分享給朋友，獲取地理位置功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-07-07