# ContextMenu 函數式創建右鍵菜單組件， 只要能拿到 dom 的 `event` 對象就能為其創建右鍵菜單。 ## Usage ```vue <template> <div> <a-button type="primary" @contextmenu="handleContext">Right Click on me</a-button> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { useContextMenu } from '/@/hooks/web/useContextMenu'; import { CollapseContainer } from '/@/components/Container'; import { useMessage } from '/@/hooks/web/useMessage'; export default defineComponent({ components: { CollapseContainer }, setup() { const [createContextMenu] = useContextMenu(); const { createMessage } = useMessage(); function handleContext(e: MouseEvent) { createContextMenu({ event: e, items: [ { label: 'New', icon: 'ant-design:plus-outlined', handler: () => { createMessage.success('click new'); }, }, { label: 'Open', icon: 'ant-design:folder-open-filled', handler: () => { createMessage.success('click open'); }, }, ], }); } return { handleContext }; }, }); </script> ``` ## createContextMenu **Options** | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | ----- | ------------------- | ------ | ------ | ---------------------------------------- | | event | `Event` | - | - | 需要創建的 dom 的 `Event` 對象 | | items | `ContextMenuItem[]` | - | - | 右鍵菜單列表，`ContextMenuItem`見下方說明 | **ContextMenuItem** | 屬性 | 類型 | 說明 | | -------- | ---------- | ----------------- | | label | `string` | 文本 | | icon | `string` | 圖標,參考圖標組件 | | disabled | `boolean` | 是否禁用 | | handler | `()=>void` | 點擊觸發函數 |