vue3自定义全局对象调用弹窗组件

1.创建弹窗组件 loading

reactive在赋值后会失去响应，在目标对象外边再多定义一个变量，重新赋值后不会丢失响应。reactive赋值失去响应的问题

<template>
  <div class="loading" v-if="comData.comDataTarget.show">
    <div class="loadingView">{{comData.comDataTarget.message}}</div>
  </div>
</template>
<script>
import{defineComponent,reactive,ref, toRefs} from 'vue'
export default defineComponent({
  name: "loading",
  setup(){
  //reactive在赋值后会失去响应，在目标对象外边再多定义一个变量，重新赋值后不会丢失响应。
    let comData = reactive({
      comDataTarget:{
        show:false,
        message:'加载中,请稍后!',
        delayed:3000,
      }
    });
    const updateCom = function(propsArg){
      comData.comDataTarget = {
        ...comData.comDataTarget,
        ...propsArg
      }
    }
    const closeCom = function(){
      comData.comDataTarget.show = false
    }
    return {
      comData,
      updateCom,
      closeCom
    }
  },
})

2.定义index.js

参考定义全局函数

import loadingCom from './index.vue'
import {h,render} from 'vue'

const renderBox = function(Vue){
    const container = document.createElement('div');
    container.id = 'loadingCom';
    // 创建虚拟dom
    const boxVNode = h(loadingCom,{
        showLoading:false
    })
    //将虚拟dom渲染到container上
    render(boxVNode,container);
    document.body.appendChild(container);
    return boxVNode
}
let boxInstance = null
const loading = function(props){
    if(boxInstance){
        const boxVue = boxInstance.component;
        boxVue.proxy.updateCom(props)
    }else{
        boxInstance = renderBox();
        loading(props)
    }
}
export default loading;

文件位置如下

3.在main.js中定义全局变量

import Loading from './components/loading/index'

const app = createApp(App)
app.config.globalProperties.loadingCom = Loading

4.使用自定义指令调用loading弹窗

此处clickRefresh是点击事件，所以虽然定义在setup中但被调用到时this已经存在。其他情况可参考如下链接一个用于注册能够被应用内所有组件实例访问到的全局属性的对象

setup(){
	const clickRefresh = function(){
	      this.loadingCom({
	        show:true
	      })
    }
}