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