<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,
        }
    },
    props:{
        // show:{
        //     type:Boolean,  
        //     default:false
        // },
    }
   
}
</script>

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

在component下创建文件，

1.此时若页面调用是以组件的方式,注掉data中show，打开props下代码，然后在页面中一下方式调用

<template>
  <div class="home">
    <loading :show="isloading"></loading>
  </div>
</template>
<script>
import Loading from '../../../../components/Loading.vue';
export default {
    name: "Index",
    components: {Loading },
    data() {
        return {
          isLoading:false,
        };
    },
    },
    created() {
    },
    methods: {
  }
};
</script>
<style lang="scss" scoped>
</style>

可挂载到vue中

loading.js

// loading.js
import LoadingComponent from '@/components/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 '@/utils/loading.js'
Vue.use(Loading);

即可，页面中调用方法：

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