Vue3+Vuetify3右键唤起v-menu下拉菜单报错求助

我正在为Vue3开发上下文菜单，希望通过右键点击下拉按钮唤起v-menu下的列表项，参考示例实现时出现了如下错误：

我的代码如下：

<v-menu offset-y>
  <template v-slot:activator="{ props }">
    <v-btn
      color="primary"
      dark
      v-bind="props"
      @contextmenu.prevent="props.click"
    >
      Dropdown
    </v-btn>
  </template>
  <v-list>
    <v-list-item
      v-for="(item, index) in menuClick"
      :key="index"
      @click=""
    >
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

问题原因 #

报错提示props.click is not a function，是因为适配Vue3的Vuetify3版本中，v-menu的激活器插槽返回参数里不再包含click方法，用来切换菜单显示的方法改为了toggle。你沿用了旧版本写法，调用了不存在的props.click，因此触发错误。

修正后的代码 #

<v-menu offset-y>
  <template v-slot:activator="{ props, toggle }">
    <v-btn
      color="primary"
      dark
      v-bind="props"
      @contextmenu.prevent="toggle"
    >
      Dropdown
    </v-btn>
  </template>
  <v-list>
    <v-list-item
      v-for="(item, index) in menuClick"
      :key="index"
      @click=""
    >
      <v-list-item-title>{{ item.title }}</v-list-item-title>
    </v-list-item>
  </v-list>
</v-menu>

说明 #

1. 从激活器插槽参数中解构出toggle方法，替代原来的props.click
2. @contextmenu.prevent="toggle"既阻止了浏览器默认右键菜单，又调用toggle唤起自定义v-menu

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