如何将 Vuetify 小吃栏组件垂直居中对齐？

Question

我需要垂直和水平对齐 Vuetify 组件

版本

vue 2.6.10 vuetify 2.1.10

这是组件 Snackbar 的当前代码

<v-snackbar
    class="no-shadow"
    v-model="snackbarShow"
    :color="snackbarType"
    :timeout="snackbarTimeout"
>
  <v-icon class="mr-3">{{ snackbarIcon }}</v-icon>
  <div>{{ snackbarText }}</div>
  <v-btn text icon color="white" @click="snackbarShow = false">
    <v-icon color="white">mdi-close-circle</v-icon>
  </v-btn>
</v-snackbar>

Answer 1

v2

<v-snackbar centered />

v3

<v-snackbar v-model="snackbar" timeout="5000" location="center">

Answer 2

在 Vuetify 2 中，您可以使用

top

/

bottom

和

left

/

right

属性来垂直和水平对齐 Snackbar。例如：

<v-snackbar
  v-model="snackbarShow"
  top
  right
>
  {{ snackbarText }}
</v-snackbar>

有关详细信息，请参阅文档。

在 Vuetify 3 中，您需要使用

location

属性。例如：

<v-snackbar
  v-model="snackbarShow"
  location="top right"
>
  {{ snackbarText }}
</v-snackbar>

详情请参阅 - 文档、位置格式。

Answer 3

小吃栏难以垂直对齐的原因基本上是因为它不是为此设计的。 Vuetify 只是 Google Material Design 规范的一种实现。就我个人而言，我喜欢 Vuetify 并且经常使用它，但请记住它只是一个组件库，因此他们的文档主要关注于如何使用组件，而没有关于使用哪个组件或何时使用的指导should 或 shouldn't 使用特定组件。这就是为什么我总是参考material.io来获取这些信息，以确保我不会只是以破坏材料设计规则的方式拼凑材料组件。

正如您在此处看到的：https://material.io/components/snackbars 小吃栏特别应该位于屏幕底部。

要获得您想要的样式，您想要在 Vuetify 库中使用的 UI 组件是

v-dialog

。 https://vuetifyjs.com/en/components/dialogs/ 从本质上讲，它只是将组件（通常是卡片）水平和垂直居中，同时提供一种简单的方法将其可见性绑定到道具，甚至为您提供

hide-overlay

道具。因此，使用该组件，您可以获得所需的样式，几乎“开箱即用”。 只需确保将组件放置在 UI 的正中心不会导致糟糕的用户体验。 Material.io 在为正确的任务选择正确的组件方面提供了一些出色的指导：https://material.io/components/dialogs#usage