58 多页签右键菜单功能开发 - udo-bit/naive_admin_pro GitHub Wiki

目标

完成右键菜单功能开发

开发

上节课我们已经完成了菜单功能的开发，这节课我们就来实现一下在tab上的右击菜单的功能。
首先我们需要在tab-item.vue中添加一个右键事件。然后抛出去给我们的父级。

<script lang="ts" setup>
  defineProps<{
  item: TabItem
  onContextmenu: (e: MouseEvent) => void
}>()
</script>
<template>
  <span @contextmenu="onContextmenu">
    {{ $t(item.tabTitle) }}
  </span>
</template>

然后我们在父级进行处理右键菜单事件的处理。
首先我先来解释一下为什么要在父级去处理这个问题，我们打开naviui的官网，找到dropdown的功能，然后我们看一下右键部分的代码实现。
大家可以看到这一部分是独立处理的，也就是说我们全局只需要一个dropdown就可以了，所以我们就不需要在这个循环组件里面去处理右键事件了。这也就是为什么我们将右键事件抛给父级的原因了。
接下来我们在multi-tab的index.vue中实现右键：

<script lang="ts" setup>
const menuDropdown = reactive({
  x: 0,
  y: 0,
  show: false,
})

function handleClose(path: string) {
  closeTab(path)
  menuDropdown.show = false
}
const handleContextMenu = (e: MouseEvent) => {
  e.preventDefault()
  menuDropdown.show = false
  nextTick(() => {
    menuDropdown.x = e.clientX
    menuDropdown.y = e.clientY
    menuDropdown.show = true
  })
}
  
function renderTab(item: TabItem) {
  return h(TabItemComp, { item, onContextmenu: handleContextMenu })
}

const handleMenuChange = (key: string) => {
  if (key === 'closeCurrent')
    closeTab()
  else if (key === 'refreshCurrent')
    refresh()

  menuDropdown.show = false
}
</script>

<template>
  <n-dropdown
    :options="dropdownOptions"
    trigger="manual"
    :x="menuDropdown.x"
    :y="menuDropdown.y"
    :show="menuDropdown.show"
    placement="bottom-start"
    @select="handleMenuChange"
    @clickoutside="menuDropdown.show = false"
  />
</template>

然后我们进行测试。

⚠️ **GitHub.com Fallback** ⚠️