Question

好的，所以我正在尝试设置一个简单的网格布局，其中包含三个等距的 v 卡。

@api_view(['GET', 'POST'])
@staticmethod
def get_chat(request, **kwargs):

现在，根据 the docs and examples they have 这应该给我留下等距的 3 张牌，而且确实如此。

问题是当我将鼠标悬停在任何上的那一刻，它们都变暗了。查看开发工具发现以下问题：

如您所见，v-cards 不是在 v-cols 中，因为它们应该是。但是，我看不到代码中的任何错误。我是否遗漏了一些额外的规则或什么？

Answer 1

我认为悬停时变暗的问题应该在其他地方，与您在 Vue 调试器中看到的奇怪现象无关。我不认为您的代码有问题（将其与我在下面 #1 中提到的内容进行比较）。我倾向于认为调试器中的奇怪之处要么是它自己的错误，要么是与调试器如何反映 Vuetify 内部结构相关的错误（或功能？），这不会破坏真正的应用程序行为。这是我的论点：

看看 Vuetify grid with cards example - 它的结构与您的示例相同（忽略 v-col 标签的“cols”属性 - 它们显示列的不均匀分布，如果您删除该属性您几乎可以使用 3 张卡片获得自己的示例，每张卡片都在自己的 v-col 中）。但是，如果您尝试将此标准 Vuetify 示例复制粘贴到一个空的 Vue CLI 应用程序中并查看调试器，您会看到相同的奇怪层次结构。检查我的屏幕截图：然而，这不会破坏 DOM 模型，其中 v-cards 按预期位于 v-cols 内：这也不会对实际应用行为。在悬停时更改背景颜色（我将简单的 CSS 更改添加到 Vuetify 原始示例只是为了尝试重现您的原始问题）就像一个魅力。请注意屏幕截图中一张卡片中的红色背景 - 它仅扩展到悬停的单个卡片。
我记得过去在 Vue 调试器中看到相同的 Vuetify 层次结构奇怪，尽管它没有造成任何问题，而且似乎不是由代码中的任何错误引起的。我当时就忽略了。
我还复制了您的示例 into a codepen，仅添加了两个基本内容：用于测试悬停的 CSS（与我在上面 #1 中添加的相同）和基本的 Vue 对象创建和安装（我' d 假设您应该自动生成）。 CSS：
```
 .v-card:hover {
     background-color: red;
 }
```
JS：
```
 new Vue({
     vuetify: new Vuetify(),
 }).$mount('#app')
```
悬停在那个代码笔中也很有效（如果我理解正确的话你提到的那种问题）。不过，我应该提到 CSS 与我在 #1 中必须使用的有一个不同。在 #1 中，使用了自定义 CSS 类 (<v-card class="imgCard">)，因为 v-card 位于另一个高级 v-card 内，因此我无法使用“.v-card”仅突出显示一个嵌套的卡片那里 - 否则他们都会一起突出显示。 BTW，这不是你偶然遇到的问题吗？

总的来说，我认为要么您的原始代码有其他原因导致问题（假设您在编写问题时可能已将其简化），要么我没有理解您的意思是哪种悬停。无论如何，我很确定 Vuetify 调试器中的奇怪之处并不意味着代码本身有问题。

尽管放置在 v-col 中，但 Vuetify v-card 不在 v-col 内

1 个答案: