如何让子组件的子Spinner在父组件页面居中显示？

我有一个包含多个子组件的父组件，其中一个子组件（ChildTwo）拥有自己的子组件——Spinner，该Spinner会在执行ChildTwo内的特定上传方法时显示，两个组件间还使用了一个Mixin。但问题在于，我希望这个Spinner显示在父组件页面的中间，而非调用它的子组件内部。

现有代码 #

父组件 #

<template>
  <child-one />
  <child-two />
  <child-three />
</template>
<script>
  export default {
    components: {
      ChildOne,
      ChildTwo,
      ChildThree
    },
  };
</script>

ChildTwo组件 #

<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>

Spinner组件 #

<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>

解决办法 #

办法1：修改Spinner的CSS实现全局居中 #

最直接的方式是调整Spinner的样式，让它脱离当前组件的文档流，固定在视口中央，同时添加遮罩层防止用户操作其他内容。修改Spinner组件的样式部分：

<style scoped>
  /* 保留原有其他样式 */
  .loader-wrapper {
    text-align: center;
    position: fixed; /* 固定定位，不受父组件布局影响 */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,0.8); /* 半透明背景遮罩 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* 确保在页面最上层 */
  }
  .loader {
    backdrop-filter: blur(5px);
    display: inline-block;
    position: relative;
    width: 80px;
    height: 80px;
  }
  /* 保留原有其他样式 */
</style>

办法2：将Spinner移到父组件，通过事件控制显示 #

把Spinner从ChildTwo移到父组件中，子组件通过触发事件通知父组件控制Spinner的显示/隐藏，更符合组件职责分离：

1. 修改父组件：

<template>
  <child-one />
  <child-two @show-loader="showLoader = true" @hide-loader="showLoader = false" />
  <child-three />
  <spinner :active="showLoader" />
</template>
<script>
  import Spinner from '@/components/common/CommonSpinner';
  import ChildOne from './ChildOne';
  import ChildTwo from './ChildTwo';
  import ChildThree from './ChildThree';
  
  export default {
    components: {
      ChildOne,
      ChildTwo,
      ChildThree,
      Spinner
    },
    data() {
      return {
        showLoader: false
      }
    }
  };
</script>

2. 修改ChildTwo组件，移除内部的Spinner，重写Mixin方法触发事件：

<template>
  # other stuff #
</template>
<script>
  import utils from '@/utils/utils';
  import SpinnerMixin from '@/components/mixins/SpinnerMixin';
  export default {
    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);
                this.hideLoader(); // 异常时也要隐藏Spinner
              });
          });
      },
      showLoader() {
        this.$emit('show-loader');
      },
      hideLoader() {
        this.$emit('hide-loader');
      }
    },
  };
</script>

办法3：用全局状态管理控制（如Vuex/Pinia） #

如果项目有全局状态管理工具，可以把Spinner的显示状态放到全局store中，适合多组件需要控制全局加载状态的场景：

1. 在store中定义加载状态：

// store/modules/loader.js
export default {
  state: {
    isLoading: false
  },
  mutations: {
    SET_LOADING(state, status) {
      state.isLoading = status;
    }
  },
  actions: {
    showLoader({ commit }) {
      commit('SET_LOADING', true);
    },
    hideLoader({ commit }) {
      commit('SET_LOADING', false);
    }
  },
  getters: {
    isLoading: state => state.isLoading
  }
}

2. 在父组件或App.vue中放置Spinner：

<template>
  <div id="app">
    <router-view />
    <spinner :active="$store.getters.isLoading" />
  </div>
</template>

3. 修改ChildTwo中的方法调用全局状态：

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

内容的提问来源于stack exchange，提问作者Cphml444