我有一个带有多个子组件的父组件。其中一个子组件有自己的子组件，这是一个加载微调器，当我在那个子组件中运行一个特定的upload方法时，我会使用它。在这两个子组件之间，还有一个用于这个方法的mixin。
但问题是我希望微调器显示在页面的中间（父节点主父节点的中间），而不是显示在我调用它的子节点中。有什么方法可以做到这一点吗？

母体

<template>
  <child-one />
  <child-two />
  <child-three />
</template>

<script>
  
  export default {
    components: {
      ChildOne,
      ChildTwo,
      ChildThree
    },
    
  };
</script>

儿童2

<template>
  <spinner />
  # other stuff #
</template>

<script>
  import utils from '@/utils/utils';
  import Spinner from '@/components/common/CommonSpinner';
  import SpinnerMixin from '@/components/mixins/SpinnerMixin';

  export default {
    components: {
      Spinner,
      SpinnerMixin,
    },
    mixins: [SpinnerMixin],

    methods: {
      importDocument() {
        utils
          .openFileDialog({
            multiple: '',
            accept: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
          })
          .then(files => {
            axiosService.importDocument(files)
              .then(result => {
                this.showLoader();
                setTimeout(() => {
                  this.$refs.importResultModal.show(result.data);
                  this.hideLoader();
                }, 3000);
              })
              .catch(error => console.error(error));
          });
      },

    },
  };
</script>

微调器（子项2的子项）

<template>
  <div v-if="active" class="loader-wrapper">
    <div class="loader">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <h4>{{ 'Please wait...' }}</h4>
  </div>
</template>

<script>
  export default {
    props: {
      active: Boolean,
      text: String
    },
  }
</script>

<style scoped>
  p {
    font-size: 0.8em;
    font-weight: 300;
    margin-top: 5px;
    letter-spacing: 1px;
    color: #31a58e;
  }

  .loader-wrapper {
    text-align: center;
  }

  .loader {
    backdrop-filter: blur(5px);
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  .loader div {
    box-sizing: border-box;
    display: block;
    position: absolute;
    width: 64px;
    height: 64px;
    margin: 8px;
    border: 8px solid #31a58e;
    border-radius: 50%;
    animation: loader 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
    border-color: #31a58e transparent transparent transparent;
  }
  .loader div:nth-child(1) {
    animation-delay: -0.45s;
  }
  .loader div:nth-child(2) {
    animation-delay: -0.3s;
  }
  .loader div:nth-child(3) {
    animation-delay: -0.15s;
  }
  @keyframes loader {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }
</style>