Vuetify - 更改卡片加载样式？

Question

我喜欢这个选项

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

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

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

但我可以通过这种方式改变行为吗？要么使条形更粗，要么更好，以在何时显示叠加loading=true？

Answer 1

除了破解CSS并更改为v-progress-linear并v-progress-overlay希望一切按预期工作之外，您将没有更多的选择

文档说，对于v-card插槽：

• 名称：进展
• 描述：自定义进度线性槽（当加载 prop 不等于 Boolean False 时显示）

所以你可以使用 atemplate但你的选择仅限于“进度线性”

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

如CodePen 中的示例

Answer 2

从 vuetify 的文档来看，加载属性可以是指定颜色的字符串或布尔值。

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

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