vuetify.js - 单击其按钮时如何保持 FAB 快速拨号打开

Question

我想在我的 Vuetify FAB 快速拨号中有切换和放大/缩小按钮。我的问题是，一旦用户单击 FAB 按钮之一，FAB 快速拨号“菜单”就会关闭，迫使他们为每次单击重新打开菜单，例如“缩小”FAB 按钮。

这是我的快速拨号。我希望用户能够多次单击缩放按钮，而每次单击后菜单都不会关闭。完成后，他们应该单击“关闭”按钮以手动关闭快速拨号菜单。

<v-speed-dial v-model="fab" fixed bottom right direction="top">
    <template v-slot:activator>
        <v-btn v-model="fab" fab>
            <v-icon v-if="fab">close</v-icon>
            <v-icon v-else>more_vert</v-icon>
        </v-btn>
    </template>
    <v-btn fab @click="addPhoto">
        <v-icon large>add_photo_alternate</v-icon>
    </v-btn>
    <v-btn fab @click="zoomIn">
        <v-icon large>zoom_in</v-icon>
    </v-btn>
    <v-btn fab @click="zoomOut">
        <v-icon large>zoom_out</v-icon>
    </v-btn>
</v-speed-dial>

我尝试使用 :value="fab" 而不是 v-model="fab" 。使用 Vue Inspector，我可以看到 fab 值停止更改，但菜单仍然像以前一样打开和关闭。

Answer 1

我找到了答案。在这里分享，以防其他人需要知道。

<v-btn fab color="blue" @click.stop="zoomOut">
    <v-icon large>zoom_out</v-icon>
</v-btn>

秘诀是在点击事件上添加 .stop。简单的!