定位化预警组件

Question

我正在尝试在VueJS/nuxtjs中创建一个alert组件，它将模拟snackbar的行为(在本例中是固定的底部位置，当我们滚动时它固定在底部，这样我们在滚动时就会看到警报)。

由于某种原因，我找不到太多关于它的文档。我已经浏览了vuetify上的警报组件API，并将其与snackbar组件进行了比较，但似乎仍然无法弄清楚它为什么不能工作。

我尝试过将位置更改为绝对位置，但由于某种原因，它不是固定在页面滚动时的底部，而是字面上固定在底部，用户只有在向下滚动到页面末尾时才能看到警报……当我使用snackbar组件时，它工作得很好，但我喜欢警报附带的图标，因此我选择使用该组件。我将附加警报的代码，以及它的父组件：

父级：<div class="help-center-page max-w-none">

警报组件：

<div class="text-center">
      <v-alert :dismissible="true" prominent type="error">
        This is an alert.
      </v-alert>
</div>

Answer 1

小节中的以下CSS适用于我：

.v-alert {
  position: fixed;
  left: 50%;
  bottom: 50px;
  transform: translate(-50%, -50%);
  margin: 0 auto;  // Without this the box extends the width of the page
}