如何让Vuetify FAB Speed Dial点击子按钮后保持展开状态

我完全懂你这个痛点——默认情况下Vuetify的v-speed-dial会在点击任何子按钮时自动收起菜单，这对于需要连续操作的功能（比如反复缩放）来说太影响体验了。下面给你两个实用的解决方案，帮你实现“点击缩放按钮不关闭菜单，手动操作后再关闭”的需求：

方案一：阻止子按钮的事件冒泡 #

v-speed-dial之所以会自动关闭，是因为子按钮的点击事件会冒泡到父组件，触发默认的关闭逻辑。我们只需要给不需要关闭菜单的子按钮加上@click.stop修饰符，阻止事件冒泡即可：

<v-speed-dial v-model="fab" fixed bottom right direction="top">
  <template v-slot:activator>
    <v-btn fab @click="fab = !fab">
      <v-icon v-if="fab">close</v-icon>
      <v-icon v-else>more_vert</v-icon>
    </v-btn>
  </template>
  <!-- 如果这个按钮需要点击后关闭菜单，就不用加.stop -->
  <v-btn fab @click="addPhoto; fab = false">
    <v-icon large>add_photo_alternate</v-icon>
  </v-btn>
  <!-- 缩放按钮添加.stop，点击后菜单保持打开 -->
  <v-btn fab @click.stop="zoomIn">
    <v-icon large>zoom_in</v-icon>
  </v-btn>
  <v-btn fab @click.stop="zoomOut">
    <v-icon large>zoom_out</v-icon>
  </v-btn>
</v-speed-dial>

方案二：手动控制菜单状态（更灵活） #

如果你想完全掌控菜单的显示/隐藏逻辑，可以用:value替代v-model绑定菜单状态，同时手动处理激活按钮的点击事件，再配合@click.stop阻止子按钮触发关闭：

<v-speed-dial :value="fab" fixed bottom right direction="top">
  <template v-slot:activator>
    <v-btn fab @click="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.stop="zoomIn">
    <v-icon large>zoom_in</v-icon>
  </v-btn>
  <v-btn fab @click.stop="zoomOut">
    <v-icon large>zoom_out</v-icon>
  </v-btn>
  <!-- 新增专门的关闭按钮，让用户可以手动关闭菜单 -->
  <v-btn fab @click="fab = false">
    <v-icon large>close</v-icon>
  </v-btn>
</v-speed-dial>

为什么你之前用:value没生效？ #

虽然你用:value="fab"后，fab的值没有变化，但v-speed-dial内部仍然会监听子按钮的点击事件，默认执行关闭菜单的逻辑——这就是为什么你看到菜单还是会自动开关的原因。加上@click.stop就能彻底阻断这个默认行为啦。

内容的提问来源于stack exchange，提问作者Parakoos