时间戳

首页 > 解决方案 > 为什么每次其他卡片属性更改时 Vuetify 都会重新加载图像？

vue.js - 为什么每次其他卡片属性更改时 Vuetify 都会重新加载图像？

问题描述

我正在使用 Vuetify 为应用程序创建登录表单。

此表单类似于 Google 的登录表单，它首先要求输入电子邮件地址，然后在下一个屏幕上输入密码。这样做的目的是查找用户的电子邮件地址，以查看是执行本地身份验证还是将用户重定向到单点登录提供商。

下面是登录组件代码的相关部分：

<template>
    <v-app id="sm-login">
        <v-content>
            <v-container class="fill-height" fluid>
                <v-card class="mx-auto px-10 pb-9" width="450px" :loading="loading">
                    <v-card-title class="justify-center pt-12"><img src="../../images/logo.png"></v-card-title>
                    <v-card-subtitle class="text-center py-6 headline">Sign In</v-card-subtitle>
                    <v-card-text>
                        <v-form v-if="!showPassword" v-on:submit.prevent="lookupEmail">
                            <v-text-field v-model.trim="email" label="Email" name="email" type="email" outlined />
                        </v-form>
                        <v-form v-if="showPassword" v-on:submit.prevent="login">
                            <v-chip outlined class="mb-6" close @click:close="showPassword = false"><v-avatar left><v-icon>mdi-account-circle</v-icon></v-avatar> {{email}}</v-chip>
                            <v-text-field v-model="password" label="Password" name="password" type="password" outlined />
                        </v-form>
                    </v-card-text>
                    <v-card-actions>
                        <v-btn text>Forgot Password?</v-btn>
                        <v-spacer />
                        <v-btn color="primary" v-on:click="clickButton">Log In</v-btn>
                    </v-card-actions>
                </v-card>
            </v-container>
        </v-content>
    </v-app>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            email: '',
            password: '',
            showPassword: false,
        };
    },
    methods: {
        lookupEmail() {
            this.loading = true;
            // Replaced an API call with a timeout for demonstration purposes
            setTimeout(() => {
                this.loading = false;
                this.showPassword = true;
            }, 2000);
        },
        login() {
            // DO LOGIN HERE ...
        },
        clickButton() {
            if (this.showPassword) {
                this.login();
            } else {
                this.lookupEmail();
            }
        }
    }
};
</script>

这里的问题是该v-card-title部分的徽标。每次loading打开或关闭该属性时，整个卡片都会稍微向上跳跃，然后再次向下跳跃。我发现添加徽标的显式高度和宽度可以修复跳跃，确实如此，但图像仍然每次闪烁。

使用 DevTools 的网络选项卡，我发现每次加载栏出现或消失时都会从服务器重新加载徽标。不用说，这不是期望或预期的行为。

为什么每次都会重新加载徽标，我该怎么办？

标签： vue.jsvuetify.js

解决方案

这是<v-card>元素如何呈现的错误。

渲染初始<v-card>创建div具有以下类的元素：v-card__title、v-card__subtitle、v-card__text和v-card__actions。

当loading设置为时应该发生的是在元素上方创建true一个新div的类。v-card__progressv-card__title

取而代之的是，正在修改 title 元素以将其转换为，v-card__progress并为v-card__title. 这个新img标签中的新标签div是导致重新加载的原因。

同样，当关闭时loading，您会认为这应该只是删除v-card__progress元素，但事实并非如此。相反，它会删除v-card__title元素并修改v-card_progress以将其转换为标题。同样，img这里的新标签会导致重新加载。

我提交了一个错误报告，该报告已在 v2.2.16 中修复。

注意：在一般使用中，这在浏览器中通常不明显。我看到它的唯一原因是因为我打开了 DevTools 并选中了“禁用缓存”。

推荐阅读