コンテキストメニューの設定

環境: client

このセットアップ関数は、クライアント環境でのみ実行されます。パッケージをインポートする際はブラウザの互換性に注意してください。

Slidev のコンテキストメニュー項目をカスタマイズします。

./setup/context-menu.ts を作成して、以下の内容を入力します:

./setup/context-menu.ts

import { useNav } from '@slidev/client'
import { defineContextMenuSetup } from '@slidev/types'
import { computed } from 'vue'
import Icon3DCursor from '~icons/carbon/3d-cursor'

export default defineContextMenuSetup((items) => {
  const { isPresenter } = useNav()
  return computed(() => [
    ...items.value,
    {
      small: false,
      icon: Icon3DCursor, // if `small` is `true`, only the icon is shown
      label: 'Custom Menu Item', // or a Vue component
      action() {
        alert('Custom Menu Item Clicked!')
      },
      disabled: isPresenter.value,
    },
  ])
})

これはコンテキストメニューに新しいメニュー項目を追加します。

コンテキストメニューをグローバルに無効にするには、フロントマターで contextMenu を false に設定します。contextMenu は dev または build に設定して、開発モードまたはビルドモードでのみコンテキストメニューを有効にすることもできます。