如何在 Vuetify 中布局多个浮动操作按钮？答案

【问题标题】：How to layout multiple Floating Action Buttons in Vuetify?如何在 Vuetify 中布局多个浮动操作按钮？
【发布时间】：2017-11-30 00:33:41
【问题描述】：

我想在右下角有两个浮动操作按钮，一个在另一个之上（如谷歌地图）。

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

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

...为了实现这一点，但我不想硬编码 90px，我真的更愿意说“我想要两个浮动操作按钮，一个垂直高于另一个”。

有没有一种 vuetify 方式来解决这个问题？

【问题讨论】：

标签： vuetify.js

【解决方案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

【讨论】：

【解决方案2】：

你可以像这样应用一个类标签：

<template>
  <v-card>
    <v-card-text style="height: 100px; position: relative">
      <v-fab-transition>
        <v-btn color="grey" dark absolute top right fab small>
          <v-icon>mdi-bookmark-outline</v-icon>
        </v-btn>
      </v-fab-transition>
      <v-spacer />
      <v-fab-transition>
        <v-btn color="grey" dark absolute top right fab small class="mr-6">
          <v-icon>mdi-heart-outline</v-icon>
        </v-btn>
      </v-fab-transition>
    </v-card-text>
  </v-card>
</template>

【讨论】：