將 typescript 代碼轉換為 Vue3 中的組合 API（設置）

Question

我試圖在單擊鼠標右鍵時實現上下文菜單。

▼ 下面這段代碼運行良好。

<template>
    <div style="width:300px;height:300px;background:red;" @contextmenu="onContextMenu1($event)" >
        Right Mouse Click Here
    </div>
</template>

<script lang="ts">

import { defineComponent } from 'vue'
import { MenuOptions } from '../components/ContextMenuDefine';

export default defineComponent({
  methods: {
    onContextMenu1(e : MouseEvent) {
      //prevent the browser's default menu
      e.preventDefault();
      //show our menu
      this.$contextmenu({
        items: [
          { 
            label: 'This is menu in parent box',
          },
          { 
            label: 'Simple item',
          },
        ],
        iconFontClass: 'iconfont',
        customClass: "class-a",
        zIndex: 3,
        minWidth: 230,
        x: e.x,
        y: e.y
      } as MenuOptions);
    },
  }
});
</script>

▼ 但是下面這段代碼不起作用。

當我單擊右鍵時，它會導致錯誤“TypeError：無法讀取未定義的屬性（讀取'$contextmenu'）”

<template>
    <div style="width:300px;height:300px;background:red;" @contextmenu="onContextMenu1($event)" >
        Right Mouse Click Here
    </div>
</template>

<script lang="ts" setup>
import { defineComponent } from 'vue'
import { MenuOptions } from '../../src/ContextMenuDefine';

const onContextMenu1 = (e) => {
    
    e.preventDefault();
    
    this.$contextmenu({
        items: [
          { 
            label: 'This is menu in parent box',
          },
          { 
            label: 'Simple item',
          },
        ],
        iconFontClass: 'iconfont',
        customClass: "class-a",
        zIndex: 3,
        minWidth: 230,
        x: e.x,
        y: e.y
      } as MenuOptions);
}
</script>

我認為 'this.$contextmenu' 應該有一個替代方案我找不到路..T_T 任何類型的評論都會有幫助:)

Answer 1

this.$contextmenu it like vue2。你應該使用vue3庫

npm i -S v-contextmenu@next

https://github.com/heynext/v-contextmenu