Vue 出一個女友吧!-loading

發表於 2019-07-25 分類於 Vue

Google AD

撰寫一篇文章其實真的很花時間，如果你願意「關閉 Adblock (廣告阻擋器)」來支持我的話，我會非常感謝你ヽ(・∀・)ﾉ

Liker 讚賞

這篇筆記文章如果對你有幫助，
你可以考慮花 30 秒登入 LikeCoin 並點擊下方拍手按鈕(最多五下)免費支持與鼓勵我。
或者你可以也可以請我「喝一杯咖啡(Donate)」。

｜

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

前言

接下來要來替產品新增、修改以及刪除時增加一個 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() 做舉例

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~