antdvue 全局配置loading


1.在app.vue組件注入

//在template中寫入
<div id="app">
      <a-spin
        v-bind="loadingProps"
      >
        <router-view />
      </a-spin>
    </div>
//在代碼中寫入
data () {
    return {
      loadingProps: {
        spinning: false
      }
    }
  },
  beforeCreate () {
    Vue.prototype.$app = this
  }

2.在main.js將函數掛在在vue上

做了個傳boolean的簡易傳值;
再做了個對象類型的校驗/兼容,防止外面亂傳參數。

Vue.prototype.$setLoading = function (props) {
  if (typeof props === 'boolean') props = { spinning: props }
  if (Object.prototype.toString.call(props) !== '[object Object]') props = {}
  this.$app.loadingProps = {
    tip: '加載中...',
    ...props
  }
}

3.在vue、js中調用

//在vue中調用
this.$setLoading(true)
this.$setLoading({
  spinning: true,
   tip: '請稍等'
})
//在js中調用
import Vue from 'vue'
Vue.prototype.$setLoading(true)


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM