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。

等待带有v卡的v对话需要Vue.js的透明背景

1 个答案: