Vuetify - 改变卡片加载方式？答案

【问题标题】：Vuetify - change card loading style?Vuetify - 改变卡片加载方式？
【发布时间】：2020-08-09 02:42:05
【问题描述】：

我喜欢这个选项

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

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

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

但是我可以用这种方式改变行为吗？在loading=trueloading=true时显示覆盖？

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案1】：

除了修改 CSS 并从 v-progress-linear 更改为 v-progress-overlay 并希望一切都按预期工作之外，您将别无选择

documentation says，用于v-card 插槽：

姓名：进度
说明：槽用于自定义进度线性（加载道具不等于Boolean False时显示）

因此您可以使用template，但您的选择仅限于“线性进度”

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

作为example in CodePen

【讨论】：

如何在main.css 中进行设置，以便对我项目中的所有页面产生影响？
@alhelal CSS 来自 Veutify，打开 codePen，点击设置（右上角）并查看 CSS 选项卡
那里我找到了一些外部 css 文件，我不想要这个。我想要这样的东西.v-progress-linear{color: red}
您可以随时覆盖您想要的 css，或者将颜色属性更改为您需要的任何内容，例如 <v-progress-linear color="#bada55"...

【解决方案2】：

使用 v-card 上的 progress 插槽以显示您喜欢的加载指示器的叠加层

Vuetify 文档v-card slots

<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>

【讨论】：

【解决方案3】：

从 vuetify 的文档中，它说加载道具可以是指定颜色的字符串或布尔值。

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

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

【讨论】：