vue+vant注册全局loading组件```js // loadgin.vue ``` ```js // loadi

// loadgin.vue
<template>
    <van-popup 
        :close-on-click-overlay="false"
        v-model="show" style="background-color:transparent"
    >
        <div class="loadingWrap">
            <van-loading v-if="show" type="spinner" />
        </div>
    </van-popup>
</template>

<script>
export default {
    name:'loading',
    data () {
        return {
            show:false,
        }
    },
   
}
</script>

<style lang='stylus' scoped>
.loadingWrap{
   
    >>>.van-popup{
        background-color rgba(0,0,0,.7) 
    }
}
</style>

// loading.js
import LoadingComponent from './loading.vue'

const loading = {
  install: function (Vue) {
    // 创建一个Vue的“子类”组件
    const LoadingConstructor = Vue.extend(LoadingComponent)

    // 创建一个该子类的实例,并挂载到一个元素上
    const instance = new LoadingConstructor()

    // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
    instance.$mount(document.createElement('div'))
    document.body.appendChild(instance.$el)

    // 在Vue的原型链上注册方法，控制组件

    Vue.prototype.$loading={
        show:()=>{
            instance.show = true
        },
        hide:()=>{
            instance.show = false
        },
    }

  },
  show:function(){
      console.log('show')
  }
}

export default loading

// main.js
import Loading from '@/components/loading.js'
Vue.use(Loading)

使用全局组件

this.$loading.show()  //打开loading
this.$loading.hide()  //关闭loading