Vue3+Vuetify3中如何让菜单唤起的Dialog持久显示？

当点击v-menu内的Change Locale菜单项时，菜单会自动关闭，这个关闭过程触发的文档级点击事件会被v-dialog的外部点击关闭机制捕获，误以为是用户点击了对话框外部，导致对话框刚打开就被关闭。第二次点击Settings按钮时，菜单已处于关闭状态，打开对话框时无额外文档点击事件干扰，因此能正常显示。

方案1：阻止菜单项点击事件传播 #

在触发对话框显示的菜单项点击事件中添加.stop修饰符，避免菜单关闭的事件被对话框的外部点击检测捕获：

<v-menu>
  <template v-slot:activator="{ props }">
    <v-btn v-bind="props" title="Settings">
      <v-icon>mdi-cog</v-icon>
    </v-btn>
  </template>
  <v-list>
    <v-list-item @click.stop="openLocaleDialog = true">
      <v-list-item-title>Change Locale</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

<v-dialog v-model="openLocaleDialog">
  <v-card>
    <v-card-title>Change Locale</v-card-title>
    <v-card-text>
      <!-- 语言选择内容 -->
    </v-card-text>
    <v-card-actions>
      <v-btn @click="openLocaleDialog = false">Cancel</v-btn>
      <v-btn @click="openLocaleDialog = false">Save</v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

方案2：禁用对话框外部点击关闭 #

如果不需要对话框通过外部点击关闭，可给v-dialog添加persistent属性，忽略外部点击事件：

<v-dialog v-model="openLocaleDialog" persistent>
  <!-- 对话框内容 -->
</v-dialog>

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