gasInjection-project/src/components/vent/micro/ventModal.vue

<template>
  <div style="position: absolute; width: 100%; height: 100%">
    <a-spin class="loading-box" size="large" :spinning="loading" tip="正在加载，请稍等。。。" />
  </div>
  <div id="micro-vent-3dModal"></div>
</template>
<script lang="ts">
  import { ref, onMounted, onBeforeUnmount, defineComponent } from 'vue';
  import { unmountMicroApps, mountMicroApp } from '/@/qiankun';
  import { resetMicroContentWH } from '/@/utils/domUtils';

  export default defineComponent({
    name: 'VentModel',
    setup() {
      const loading = ref(true);
      onMounted(() => {
        // 判断子应用是否存在，不存在注册
        mountMicroApp('micro-vent-3dModal', true);
        resetMicroContentWH('micro-vent-3dModal', () => {
          loading.value = false;
        });
      });

      onBeforeUnmount(async () => {
        await unmountMicroApps(['micro-vent-3dModal']);
      });

      return { loading };
    },
  });
</script>
<style lang="less" scoped>
  .loading-box {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
  }
  #micro-vent-3dModal {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }
</style>