溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下怎樣在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動畫”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
