在 vuetify 中的 fab 按钮上放置叠加层答案

【问题标题】：Put overlay on fab buttons in vuetify在 vuetify 中的 fab 按钮上放置叠加层
【发布时间】：2019-12-29 10:57:51
【问题描述】：

正如您在下面的 sn-p 中看到的那样，叠加层没有得到 fab 按钮的圆形形式。我怎样才能做到这一点？

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      choices: [{
          text: "Foo",
          isCorrect: true
        },
        {
          text: "Bar",
          isCorrect: false
        }
      ]
    }
  }
})

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>

<body>
  <div id="app">
    <v-hover v-slot:default="{ hover }">
      <v-btn light fab large color="primary">
        <v-overlay absolute :value="!hover">
          b
        </v-overlay>
        a
      </v-btn>
    </v-hover>
  </div>
</body>

</html>

我可以用 css 做到这一点，但我正在通过 vuetify 寻找一些解决方案。

【问题讨论】：

标签： javascript html vue.js vuetify.js

【解决方案1】：

尝试添加以下 CSS 规则，并且不要忘记将类添加到您的 btn(class="btn--overlayed")：

.btn--overlayed .v-btn__content {
  position: static;
}

.btn--overlayed .v-overlay {
  border-radius: 50%;
}

代码 sn-p

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
      choices: [{
          text: "Foo",
          isCorrect: true
        },
        {
          text: "Bar",
          isCorrect: false
        }
      ]
    }
  }
})

.btn--overlayed .v-btn__content {
  position: static;
}

.btn--overlayed .v-overlay {
  border-radius: 50%;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/font@3.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
</head>

<body>
  <div id="app">
    <v-hover v-slot:default="{ hover }">
      <v-btn light fab large color="primary" class="btn--overlayed">
        <v-overlay absolute :value="!hover">
          b
        </v-overlay>
        a
      </v-btn>
    </v-hover>
  </div>
</body>

</html>

【讨论】：