javascript - 等待带有 v-card 的 v-dialog 需要 Vue.js 的透明背景

Question

我有以下 Vue 代码:

   <v-dialog v-model="overlay" persistent width="100px">
      <v-card>
        <v-card-text>
          <v-overlay>
            <v-progress-circular indeterminate size="64"></v-progress-circular>
          </v-overlay>
        </v-card-text>
        <v-card-actions>
          <v-btn x-small color="primary" flat @click="overlay =false">Cancel</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

它显示在屏幕中央，但在 v 卡中具有白色背景。我真的不在乎是否使用了 v 卡，但我希望有一个带有取消的等待圈，显示为具有完全透明背景的覆盖层。

我已经尝试过

  <v-dialog v-model="overlay" persistent width="100px">


 <v-card color="transparent">
    <v-card-text color="rgb(255, 255, 255, 0.2)">
   <!--  <v-card-text color="rgb(0, 0, 0, 0.2)"> -->
      <v-overlay>
        <v-progress-circular indeterminate size="64"></v-progress-circular>
      </v-overlay>
    </v-card-text>
    <v-card-actions>
      <v-btn x-small color="primary" flat @click="overlay =false">Cancel</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

但我仍然得到纯白色背景。

感谢您的帮助。

Answer 1

如果您想要全屏叠加层，请将叠加层保留在模板的根目录中。然后使用v-card和v-btn添加内容以取消v-overlay内的加载

我构建了一个示例:https://codepen.io/vsantin/pen/ZEEPBOx

 <v-overlay :value="overlay" color="white">
    <v-card width="250">
      <v-card-text class="text-center">
        <v-progress-circular size="20" class="mr-1" indeterminate></v-progress-circular> 
        <span>Loading...</span>
      </v-card-text>
      <v-card-actions>
        <v-btn small color="primary" flat @click="overlay = false">Cancel</v-btn>
      </v-card-actions>
    </v-card>
  </v-overlay>

如果您只想在叠加层中旋转，请移除v-card。