antdvue 全局配置loading

摘要:
==“[objectObject]”)props={}this.$应用程序。loadingProps={tip:“正在加载…”,…props}3。在vue和js中调用这个//在vue$setLoadingthis.$中调用这个SetLoading//调用importVuefrom'vu'vue.prototype。js中的$SetLoading

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)

免责声明:文章转载自《antdvue 全局配置loading》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇MHDD检测不到硬盘的解决办法mysql 事件(Event) 总结下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

基于Vue实现拖拽效果及阻止拖拽

参考地址:基于Vue实现拖拽效果 参考链接中讲的比较详细,我只使用了其中自定义指令的方法。整体代码如下: <template> <!-- 卡片 --> <div v-drag id="card"> </div> </template> <script>...

vue-awesome-swiper 配置 (分页不显示鼠标无效渐变无效等)

代码片断 import { Swiper, EffectFade, Mousewheel, Pagination } from 'swiper' import { directive } from 'vue-awesome-swiper' import 'swiper/swiper-bundle.css' Swiper.use([EffectFade,...

vue创建全局组件

创建组件使用Vue.component()方法,它是创建的全局组件 参数1表示组件名字 参数2表示组件配置项 <div id="app"> <!-- 2. 使用组件,像html标签一样 --> <index></index> <index-b><...

vue简单的CheckBox节点树

初学vue.js,恰好公司有个页面需要做一个简单的CheckBox组成的节点树,于是摸索着写了一个。 业务逻辑为:选中父节点,子节点全部选中;取消选中父节点,子节点全部取消;选中字节点,父节点选中。 附例子链接:写完的html页面,下载后可以直接在浏览器上观看。 样式如下: 准备工作:引入vue.js Html代码如下:div container 为显示...

Vue实现二级菜单的显示与隐藏

1 <html> 2 <head> 3 <title>Vue实现二级菜单的显示与隐藏</title> 4 <script src="vue.js"></script> 5 <style type="text/css"> 6 *{ 7...

Vue 组件传参的八种方式总结

Vue 组件传参的八种方式总结 Vue 组件的使用不管是在平常工作还是在面试面试中,都是频繁出现的。因此系统的梳理一下组件之间的传参还是非常有必要的 一、props 传参 子组件定义 props 有三种方式: // 第一种数组方式 props: [xxx, xxx, xxx] // 第二种对象方式 props: { xxx: Number, xxx: S...