在開發專案的時候發現為了提高互動上的體驗，需要加乙個loading效果，為了請求介面資料響應過慢。在沒有引用其他ui框架的情況下自己寫乙個指令。
首先建立資料夾如下：
images資料夾裡面就乙個隨便適合的gif，這個可以找ui幫忙解決，或者自己去找找素材。
loading.vue裡面的內容
很簡單，就乙個ui樣式，加乙個顯示隱藏
下面是index.js
import vue from 'vue'import loading from './loading.vue'const mask =vue.extend(loading)接下去在想用的地方加乙個 v-loading="isloading" 指令就行， isloading 是各自頁面控制顯示隱藏的引數const toggleloading = (el, binding) =>)
} else
}const insertdom = (parent, el) =>
export
default
})el.instance =mask
el.mask =mask.$el
el.maskstyle ={}
binding.value &&toggleloading(el, binding)
},update:
function
(el, binding)
},unbind:
function
(el, binding)
}
哦，別忘了在main.js註冊乙個指令全域性
//其實這個指令的方法是參考餓了麼裡面的loading方法寫出來的，還希望有優化的地方請指教。註冊自定義指令
object.keys(directives).foreach(key =>)
全域性loading指令
import store from store index.js 自定義指令，防止重複提交 v preventreclick 直接呼叫即可 export default let name el.innerhtml el.setattribute disabled disabled let v vno...
vue資料請求loading
width 100 height 100 這裡的fetchloading是存在vuex裡面的乙個變數。在store modules common.js裡需要如下定義 此js檔案用於儲存公用的vuex狀態 import api from fetch api import as types from t...
vue全域性loading動畫
首先我們需要寫乙個動畫樣式，這裡我們就用element ui裡的loading載入吧 this.store.state.show class big class loading v loading loading element loading text 拼命載入中 element loading ...