Vuetify中VMenu内嵌AppDateTimePicker选日期时菜单关闭的解决方法

在Vuexy（Vue & Vuetify）主题中，VMenu组件内嵌套AppDateTimePicker（Vuetify日期选择器）时，选择日期会导致VMenu意外关闭，即使添加@click.stop或:close-on-content-click="false"也无效，可通过以下步骤解决：

1. 修正VMenu激活器的Slot定义 #

代码中重复声明了activator slot可能导致事件绑定冲突，合并slot定义：

<template v-slot:activator="{ props, on }">
  <VIcon class="cursor-pointer" icon="tabler-settings-plus" v-bind="props" v-on="on" @click="updateEditIndex(indexUpper)"></VIcon>
</template>

2. 给VMenu添加关闭控制属性 #

明确设置:close-on-content-click="false"，阻止点击菜单内容时关闭VMenu：

<VMenu width="300" height="450" :scrim="true" :close-on-content-click="false">

3. 阻止日期选择器的事件冒泡 #

Vuetify日期选择器的弹窗事件可能通过mousedown触发而非click，给AppDateTimePicker添加@mousedown.stop阻止事件冒泡到父级VMenu：

<AppDateTimePicker 
  :label="item.title" 
  placeholder="Pick up the date" 
  v-model="field[item.value]"
  @mousedown.stop
/>

4. 将日期选择器弹窗挂载到VMenu内容内（可选） #

如果上述方法无效，可将AppDateTimePicker的弹窗挂载到VMenu的DOM节点下，让Vuetify识别点击事件属于菜单内容：

<AppDateTimePicker 
  :label="item.title" 
  placeholder="Pick up the date" 
  v-model="field[item.value]"
  attach=".v-menu__content"
/>

最终修改后的完整代码片段 #

<VMenu width="300" height="450" :scrim="true" :close-on-content-click="false">
  <template v-slot:activator="{ props, on }">
    <VIcon class="cursor-pointer" icon="tabler-settings-plus" v-bind="props" v-on="on" @click="updateEditIndex(indexUpper)"></VIcon>
  </template>
  <VList>
    <VListItem v-for="(item, indexLower) in menuItems" :key="indexLower" :active="false">
      <div class="d-flex flex-column ml-2" v-if="item.type === 'checkbox'">
        <VCheckbox v-model="field[item.value]" :label="item.title" />
        <p class="text-body-2">{{ item.description }}</p>
      </div>
      <div class="d-flex flex-column ml-2" v-if="item.type === 'textfield'">
        <!-- 你的输入字段 -->
      </div>
                          
      <div class="d-flex flex-column ml-2" v-if="item.type === 'date'">
        <AppDateTimePicker 
          :label="item.title" 
          placeholder="Pick up the date" 
          v-model="field[item.value]"
          @mousedown.stop
        />
      </div>
    </VListItem>
  </VList>
</VMenu>

内容的提问来源于stack exchange，提问作者Mohammed Arham Khan