Vuetify - 如何更改卡片加载样式？

Question

我喜欢这个选项。

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

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

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

但我能以这样的方式改变行为吗？可以将进度条加粗或者更好的方式是，在loading=true时显示叠加层吗？

- Milano

Answer 1

除了黑客攻击CSS并将 v-progress-linear 更改为 v-progress-overlay，并希望一切按预期工作之外，你几乎没有更多选择。

根据文档，对于 v-card 插槽，有以下内容：

- 名称: 进度条（progress） - 描述: 用于自定义进度线性条的插槽（当加载属性不等于布尔值False时显示）

因此，您可以使用 template，但只能限制于 "progress linear"。

<v-card :loading="loading">
    <template slot="progress">
        <v-progress-linear color="red" indeterminate></v-progress-linear>
    </template>
    ...
</v-card>

就像 CodePen 的示例 一样。

- balexandre

---

如何在 main.css 中设置，以便该效果适用于我项目中的所有页面？ - alhelal

@alhelal，CSS来自Veutify，请打开CodePen，点击设置（右上角），查看CSS选项卡。 - balexandre

我在那里找到了一些外部CSS文件，但我不想要它。我想要像这样的东西.v-progress-linear{color: red} - alhelal

你可以随时覆盖所需的CSS，或将颜色属性更改为所需的任何内容，例如 <v-progress-linear color="#bada55"... - balexandre

Answer 2

根据vuetify文档，loading属性可以是指定颜色的字符串或布尔值。

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

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

- Anees Hameed

Answer 3

使用 v-card 上的 progress 插槽来展示带有您所选择的加载指示器的叠加层。

Vuetify 文档 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>

- MAW