vue + vuetify：拆分按钮实现答案

【问题标题】：vue + vuetify: split-button implementationvue + vuetify：拆分按钮实现
【发布时间】：2020-10-09 20:08:06
【问题描述】：

我正在构建一个像这样的拆分按钮：https://codepen.io/mtermoul/pen/KKMPqvd，

<v-btn-toggle>
    <v-btn>Edit Avatar</v-btn>
    <v-menu offset-y>
        <template v-slot:activator="{ on, attrs }">
            <v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
        </template>
        <v-list>
            <v-list-item>
                <v-list-item-title>Copy from local</v-list-item-title>
            </v-list-item>
        </v-list>
    </v-menu>
</v-btn-toggle>

但我不希望按钮在用户单击后保持切换状态。

知道如何在 v-btn-toggle 中禁用该行为吗？

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

v-btn-toggle 有 active-state 你不能禁用它，直到现在不支持这个功能。您可以使用以下代码

<v-item-group class="v-btn-toggle">
    <v-btn>Edit Avatar</v-btn>
          <v-menu offset-y>
            <template v-slot:activator="{ on, attrs }">
              <v-btn v-on="on" v-bind="attrs"><v-icon>arrow_drop_down</v-icon></v-btn>
            </template>
            <v-list>
              <v-list-item>
                <v-list-item-title>Copy from local</v-list-item-title>
              </v-list-item>
              <v-list-item>
                <v-list-item-title>Upload</v-list-item-title>
              </v-list-item>
              <v-list-item>
                <v-list-item-title>Delete</v-list-item-title>
              </v-list-item>
            </v-list>
          </v-menu>
  </v-item-group>

将其粘贴到您的 codepen 中并按预期工作。

【讨论】：

【解决方案2】：

当您遇到类似问题时，检查元素并确定赋予其样式的 css 属性：

应该这样做：

.theme--light.v-btn--active::before,
.theme--light.v-btn--active:hover::before,
.theme--light.v-btn:focus::before {
  opacity: 0 !important;
}

【讨论】：