如何让v-if div内vue.js spinner组件的提示文本显示在组件下方

问题场景 #

使用Vue框架开发前端时编写数据库同步状态页面，核心逻辑为：

• 当this.databaseSyncInProgress值为true时，展示spinner加载动画与「Database sync in progress...」提示文本
• 当值为false时，展示数据库同步操作按钮
  当前功能逻辑运行正常，但提示文本未显示在加载动画正下方，而是错位出现在动画右侧偏上位置。

原始代码如下：

<div class="panel">
  <div class="panel-body">
    <div v-if="this.databaseSyncInProgress" class="col-12 d-flex justify-content-center mt-10">
      <moon-loader :loading="true" :color="'#3e8ef7'"></moon-loader>
      Database sync in progress...
    </div>
    <div v-if="!this.databaseSyncInProgress" class="row">
      <div>
        <h4>Synchronize database</h4>
        <button
          type="button"
          class="btn btn-primary"
          style="float: center"
          @click="syncAll"
        >
          Sync database
        </button>
      </div>
    </div>
  </div>
</div>

<script>
import MoonLoader from 'vue-spinner/src/MoonLoader.vue'

export default {
  name: 'BackboneFetchAll',
  data() {
    return { }
  },
  components: {
    MoonLoader
  },
}
</script>

错位原因 #

加载状态容器使用了Bootstrap的d-flex类开启弹性布局，flex布局默认主轴方向为水平方向（flex-direction: row），容器内的moon-loader组件和文本节点会作为子元素沿水平方向从左到右排列，因此文本会出现在loader右侧，而非下方。

修复方案 #

调整加载容器的flex布局属性即可解决问题，具体修改点：

• 给加载容器添加flex-column类，将flex主轴改为垂直方向，让子元素从上到下排列
• 给加载容器添加align-items-center类，让所有子元素在水平方向居中对齐
• 给提示文本添加上边距，和loader拉开合适的间距，避免贴靠
• 可选优化：将第二个互斥的v-if改为v-else，减少重复条件判断

修改后的核心代码如下：

<div class="panel">
  <div class="panel-body">
    <div v-if="this.databaseSyncInProgress" class="col-12 d-flex flex-column align-items-center justify-content-center mt-10">
      <moon-loader :loading="true" :color="'#3e8ef7'"></moon-loader>
      <p class="mt-3 mb-0">Database sync in progress...</p>
    </div>
    <div v-else class="row">
      <div>
        <h4>Synchronize database</h4>
        <button
          type="button"
          class="btn btn-primary"
          style="float: center"
          @click="syncAll"
        >
          Sync database
        </button>
      </div>
    </div>
  </div>
</div>

调整后加载动画会在容器上方居中，提示文本自动排列在动画正下方，间距可通过修改mt-*类的数值自由调整。

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