Vue 出一個女友吧!-loading

前言

接下來要來替產品新增、修改以及刪除時增加一個 loading 特效,這樣子對於使用者體驗也會比較好,那這邊就會使用到 vue-loading-overlay

起手式

由於這個套件會在全域使用,所以就要在 main.js 做一下修改加入以下原始碼

1
2
3
import Loading from 'vue-loading-overlay';
import 'vue-loading-overlay/dist/vue-loading.css';
Vue.component('Loading', Loading); // 注意是 Vue.component 不是 Vue.use

接下來就是將以下這一段程式碼貼到 products 最前面

1
loading(:active.sync='isLoading')

並且新增一個資料叫做 isLoading: true

isLoading

讓我們直接加入到 products 上看看吧,如果沒有問題的話就會出現讀取效果哩~

isLoading

使用方式

那麼使用方式很簡單,我只舉例一個地方,因為其他地方做法都是一模模一樣樣,我用 getProducts() 做舉例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
getProduct() {
const vm = this;
const url = `${process.env.VUE_APP_HEXURL}/api/${process.env.VUE_APP_HEXNAME}/admin/products`;
vm.isLoading = true; // 一執行該方法就將 isLoading 改為 true
vm.$http.get(url)
.then((response) => {
if (response.data.success) {
vm.products = response.data.products;
vm.isLoading = false; // 成功取得資料就改為 fasle
}
})
.catch((error) => {
console.log(error);
vm.isLoading = false;
});
},

那麼這樣子就可以在 AJAX 過程中出現 loading 效果,成功取得後就會自動消失 loading~

0%