右键菜单 Contextmenu

通用的右键菜单组件，只需要插入默认选项即可

基础用法

直接用组件默认插槽插入即可,需要监听属性并进行弹窗调用。注意，这里必须需要传入$event这个参数，否则无法获取正确位置。

右键点击菜单

<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)"
    >
      右键点击菜单
    </div>
    <b-contextmenu ref="contextMenuRef">
      <li>
        <b-icon name="edit" />
        编辑
      </li>
      <li>
        <b-icon name="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>

<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)"
    >
      右键点击菜单
    </div>
    <b-contextmenu ref="contextMenuRef">
      <li>
        <b-icon name="edit" />
        编辑
      </li>
      <li>
        <b-icon name="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

名称	说明
default	默认插槽

右键菜单 Contextmenu ​

基础用法 ​

Slot ​

右键菜单 Contextmenu

基础用法

Slot