Javascript Vuetify-更改卡加载方式？

我喜欢这个选择

<v-card :loading="loading">...

。。。

但我想将样式从线性进度条更改为（例如）叠加。 我知道我可以通过绑定颜色而不是布尔值（true）来更改颜色

。。。

---

但我能以这种方式改变行为吗？使条形图变厚或更好，以便在加载=true时显示覆盖图？

除了修改CSS并从

v-progress-linear

更改为

v-progress-overlay

并希望所有操作都能按预期进行之外，您将没有更多的选项

对于

v卡

插槽：

• 姓名:progress
• 说明：自定义进度线性的插槽（加载道具不等于布尔值False时显示）

因此，您可以使用

模板

，但您的选项仅限于“线性进度”

...

---

正如vuetify文档中的

所述，加载属性可以是指定颜色的字符串，也可以是布尔值

因此，可以通过以下方式轻松设置颜色加载动画：

<v-card :loading="loading ? 'red': null">
...
</v-card>

...

使用v-card上的进度插槽显示带有加载指示器风格的覆盖

Vuetify文档

加载
停用加载
激活加载

<v-card :loading="loading ? 'red': null">
...
</v-card>

<v-card class="ma-auto" width="300" height="300" :loading="loading">
    <template slot="progress">
        <v-overlay absolute class="d-flex flex-column text-center">
            <div>
                <v-progress-circular size="75" color="accent " :value="loadingProgress" indeterminate>
                    <span>Loading</span>
                </v-progress-circular>
            </div>
            <div>
                <v-btn text dark @click="loading = false" class="mt-3">Deactivate loading</v-btn>
            </div>
        </v-overlay>
    </template>
    <v-card-title></v-card-title>
    <v-card-text></v-card-text>
    <v-card-actions class="justify-center">
        <v-btn @click="loading = true">Activate loading</v-btn>
    </v-card-actions>
</v-card>