vuetify.js - 如何在 Vuetify 中布局多个 float 操作按钮？

Question

我想在右下角有两个 float 操作按钮，一个在另一个之上(如谷歌地图)。

目前我正在使用固定样式的底部偏移在其中一个按钮上执行此操作，如下所示:

<v-btn fab fixed bottom right>...</v-btn>
<v-btn fab fixed bottom right style="bottom: 90px">...</v-btn>

...要实现这一点，但我不想硬编码 90px，我真的更愿意说“我想要两个 float 操作按钮，一个垂直在另一个上方”。

有没有办法解决这个问题？

Answer 1

您可以将它们放在另一个元素中，并使用一些自定义 CSS 进行定位:

<template>
  <v-layout column class="fab-container">
    <v-btn fab>
      <v-icon>add</v-icon>
    </v-btn>
    <v-btn fab>
      <v-icon>remove</v-icon>
    </v-btn>
  </v-layout>
</template>

<style>
  .fab-container {
    position: fixed;
    bottom: 0;
    right: 0;
  }
</style>

https://codepen.io/anon/pen/KyJzQP?editors=1100