Contextmenu

A general-purpose context menu component; simply insert default options to use.

Basic Usage

Simply insert content using the default slot. You need to listen to the property and make a dialog call. Note: you must pass the $event parameter, otherwise the correct position cannot be obtained.

Right click for menu

<template>
  <div flex>
    <div
      style="width: 224px; border: 1px solid #eee; height: 150px; margin-right: 20px"
      flex="main:center cross:center"
      @contextmenu.stop.prevent="show($event)"
    >
      Right click for menu
    </div>
    <b-contextmenu ref="contextMenuRef">
      <li>
        <b-icon name="edit" />
        Edit
      </li>
      <li>
        <b-icon name="delete" />
        Delete
      </li>
    </b-contextmenu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const contextMenuRef = ref(null)

function show(e) {
  contextMenuRef.value?.showMenu(e)
}
</script>

Slot

Name	Description
default	Defaultslot