Vuetify 在 v-card-actions 中使用 v-dialog 组件，不会导致填充问题

Question

您可以在这里看到我遇到的问题：

https://codepen.io/ryanrapini/pen/LYeWZKR?editors=1010

本质上，我有几个对话框，我已将它们包含在它们自己的自定义“vue 组件”中，即

order-dialog.vue

。在理想的情况下，我可以简单地将这个

<order-dialog>

组件包含在任何需要的地方，它会渲染激活器按钮，然后处理组件内的所有对话框状态，因此父级无需担心。

不幸的是，如果我在

v-card-actions

部分执行此操作，我会遇到间距问题。这是 Vuetify 的错误还是我做错了什么？

我认为通过将激活器移出

<v-dialog>

标签可能会解决问题，但它仍然无法解决问题，除非我将组件分解为 v-dialog 组件和单独的激活器，这意味着我现在需要管理父级对话框的状态。

感谢您的帮助。

Answer 1

我不认为你做错了什么，而且我不确定这是一个 Vuetify bug。

这来自 Vuetify 库中的 CSS 规则：

.v-application--is-ltr .v-card__actions>.v-btn.v-btn+.v-btn {
    margin-left: 8px;
}

我认为作者假设这个块应该只包含按钮。但在你的情况下（在第二种和第三种方法中）输出 HTML 看起来像这样：

<div class="v-card__actions">
  <button class="v-btn ...">
    ...
  </button>
  <div class="v-dialog__container"><!----></div>
  <button type="button" class="v-btn ...">
    ...
  </button>
  <button type="button" class="v-btn ...">
    ...
  </button>
</div>

所以

v-dialog__container

打破了这个规则。

您可以使用附加规则来解决您的问题：

.v-application--is-ltr .v-card__actions>.v-btn:not(:first-child) {
    margin-left: 8px !important;
}

或者您也可以将辅助类 (

ml-2

) 应用于特定按钮。

Answer 2

很抱歉在来世提出这个问题，但我遇到了同样的问题，并且想帮助那些不想使用其他提到的方法的人。这也适用于 Vue3。

深入研究文档后，我意识到 v 槽操作实际上对于对话框的运行来说并不是必需的。 它所做的只是使用插槽“actions”来设置模板的样式，以处理 v-card 中的按钮样式。 我所做的就是按照我想要的方式设计所有内容，而不会有尴尬的（在我自己看来，但并不是说这是错误的）目标，就是删除整个模板，并在模板底部添加一个由“默认”包裹的按钮。 我觉得这更友好一些，因为这种变化对我来说似乎不那么剧烈并且更具可扩展性。

之前的例子：

<v-dialog max-width="500">
  <template v-slot:activator="{ props: activatorProps }">
    <v-btn
      v-bind="activatorProps"
      color="surface-variant"
      text="Open Dialog"
      variant="flat"
    ></v-btn>
  </template>

  <template v-slot:default="{ isActive }">
    <v-card title="Dialog">
      <v-card-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </v-card-text>

      <v-card-actions>
        <v-spacer></v-spacer>

        <v-btn
          text="Close Dialog"
          @click="isActive.value = false"
        ></v-btn>
      </v-card-actions>
    </v-card>
  </template>
</v-dialog>

之后的示例：

<v-dialog max-width="500">
  <template #activator="{ props: activatorProps }">
    <v-btn
    :="activatorProps"
    color="surface-variant" 
    text="Open Dialog" 
    variant="flat"></v-btn>
  </template>

    <template #default="{ isActive }">
    <v-card title="Dialog">
      <v-card-text>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
        eiusmod tempor incididunt ut labore et dolore magna aliqua.
      </v-card-text>

    <button @click="isActive.value = false">Close</button>
    </v-card>
  </template>
</v-dialog>