vue+vuetify:拆分按钮实现

Question

我正在构建一个拆分按钮，如下所示：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中禁用这种行为吗？

Answer 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>

将其粘贴到代码笔中，并按预期工作。

Answer 2

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

这应该做到：

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

Answer 3

将组件的modelValue设置为空

<v-btn-toggle :model-value="null">