Element Plus UI：无法打开菜单项的新选项卡

发布于 2025-01-09 09:17:10 字数 1076 浏览 2 评论 0原文

我在 Vue 上为 Element Plus UI 创建了一个水平菜单。当我右键单击菜单项时，我无法选择在新选项卡中打开它。

但是当在元素加上文档时。当我右键单击菜单项时，我有该选项：

由于我在文档中找不到任何相关参考，因此如何实现该功能？

菜单代码：

<template>
  <el-menu
    class="sideMenu"
    :collapse="isCollapse"
    active-text-color="#409EFF"
    :default-active="activeLink"
    text-color="#909399"
    background-color="#FFFFFF"
    :router="true"
  >
    <el-menu-item index="/menu1">
      <el-icon><DocumentChecked /></el-icon>
      <span>Menu 1</span>
    </el-menu-item>

    <el-menu-item index="/menu2">
      <el-icon><DocumentChecked /></el-icon>
      <span>Menu 2</span>
    </el-menu-item>
  </el-menu>
</template>

原文

I have created a horizontal menu for Element Plus UI on Vue. When I right click on a menu item, I do not have the option to open it in a new tab.

But when on the element plus documentation. When I right click on a menu item I have that option:

How do I achieve that functionality since I can't find any references on that on the documentation?

Menu Code:

<template>
  <el-menu
    class="sideMenu"
    :collapse="isCollapse"
    active-text-color="#409EFF"
    :default-active="activeLink"
    text-color="#909399"
    background-color="#FFFFFF"
    :router="true"
  >
    <el-menu-item index="/menu1">
      <el-icon><DocumentChecked /></el-icon>
      <span>Menu 1</span>
    </el-menu-item>

    <el-menu-item index="/menu2">
      <el-icon><DocumentChecked /></el-icon>
      <span>Menu 2</span>
    </el-menu-item>
  </el-menu>
</template>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

独夜无伴 2025-01-16 09:17:10

根据 Element Plus 文档 el-menu -物品
有一个 route 属性：其类型为 Obj。因此， el-menu-item 类将类似于：

<el-menu-item index="/menu1" route= VUE-ROUTER-OBJ>

或者您可以使用 menu 属性，该属性从菜单项的索引值激活路由：

<!DOCTYPE html>
<el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router= true 
  >
<!-- router is the key attribute-->


<el-menu-item index="/" route="/"> Home </el-menu-item>

<el-menu-item index="PATH OF VUE ROUTER"> LINK NAME </el-menu-item>

According to Element Plus documentation el-menu-item
has an attribute of route: which is type Obj. So, the el-menu-item class would be like:

<el-menu-item index="/menu1" route= VUE-ROUTER-OBJ>

Or You can use the menu attribute which activates routing from the index value of menu-items:

<!DOCTYPE html>
<el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    @select="handleSelect"
    router= true 
  >
<!-- router is the key attribute-->


<el-menu-item index="/" route="/"> Home </el-menu-item>

<el-menu-item index="PATH OF VUE ROUTER"> LINK NAME </el-menu-item>

回复收藏 0 原文

錯遇了你 2025-01-16 09:17:10

就我而言，我必须在菜单项中使用 el-link 才能使其完全与 ctrl + 单击配合使用，还可以手动右键单击并选择“在新选项卡中打开”选项：

<el-menu mode="horizontal" menu-trigger="click" ref="menuRef" >
    <el-menu-item>
      <el-link :underline="false" class="nav-brand" :href="/home">
        Home</el-link>
    </el-menu-item>
</el-menu>

还有使用 menu-trigger="click"时已知的问题代码>模式。仅当用户单击子菜单标题时，子菜单才会关闭，而不是在菜单外单击时关闭！要解决这个问题，您可以使用 import { onClickOutside } from '@vueuse/core' ，如下所示：

<template>
  <el-menu mode="horizontal" menu-trigger="click" ref="menuRef">
    <el-sub-menu :index="'customMenuIndex'">
      <template #title>
        <span>Title</span>
      </template>
      <el-menu-item>
        <el-link :underline="false" :href="'/subpage'">SubMenu</el-link>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { onClickOutside } from '@vueuse/core'

const menuRef = ref(null)

onClickOutside(menuRef, (event) => {
  menuRef.value.close('customMenuIndex')
})
</script>

In my case, I had to use el-link inside the menu items to make it fully work with ctrl + click and also manually right click and select the "open in new tab" option:

<el-menu mode="horizontal" menu-trigger="click" ref="menuRef" >
    <el-menu-item>
      <el-link :underline="false" class="nav-brand" :href="/home">
        Home</el-link>
    </el-menu-item>
</el-menu>

Also there is a issue known when you use menu-trigger="click" mode. The submenus only are closed when user click on the submenu title, not when use click away outside the menu! To fix that, you can use import { onClickOutside } from '@vueuse/core' like this:

<template>
  <el-menu mode="horizontal" menu-trigger="click" ref="menuRef">
    <el-sub-menu :index="'customMenuIndex'">
      <template #title>
        <span>Title</span>
      </template>
      <el-menu-item>
        <el-link :underline="false" :href="'/subpage'">SubMenu</el-link>
      </el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { onClickOutside } from '@vueuse/core'

const menuRef = ref(null)

onClickOutside(menuRef, (event) => {
  menuRef.value.close('customMenuIndex')
})
</script>

回复收藏 0 原文

攒眉千度 2025-01-16 09:17:10

这个问题具有误导性

，我必须指出 element-plus 不使用自己的菜单作为文档。这就是为什么你可以在他们的网站上右键单击它。如果您右键单击他们的任何菜单示例，它们都不允许您在新选项卡中打开。

与 el-menu 一起使用的实际解决方案

实际上有两个。在这两种情况下，您都必须使用 el-menu 的 route="false" （默认）。

选项 1 - 使用 `el-button` 作为插槽和 `tag="router-link"`

      <el-menu-item index="my-menu-item">
        <el-button tag="router-link" :to="{name:'routeName'}">
         To new route
        </el-button>
      </el-menu-item>

如果您不关心样式，这将起作用。因为不幸的是 el-button 类位于按钮上。
您可以通过多种方式绕过此问题，例如使用 javascript 删除该类，或者尝试覆盖该类更改的每个属性。或者您可以尝试选项 2。

选项 2 - 直接使用 `router-link` 作为插槽

      <el-menu-item index="my-menu-item">
        <router-link :to="{name:'routeName'}">
          To new route
        </router-link>
      </el-menu-item>

这对于样式和一般情况来说效果更好。这就是我一起去的。

The question is misleading

I must point out that element-plus DOES NOT use their own menu for the documentation. Which is why you can right click it in their website. If you right click any of their menu examples, none of them allow you to open in new tab either.

The actual solution that works with el-menu

There are two, actually. In both, you must use the route="false" of el-menu (default).

Option 1 - Use `el-button` as the slot with `tag="router-link"`

      <el-menu-item index="my-menu-item">
        <el-button tag="router-link" :to="{name:'routeName'}">
         To new route
        </el-button>
      </el-menu-item>

This will work if you don't care about the styling. Because unfortunately the class el-button is on the button.
You can bypass this in a few ways, like using javascript to remove the class, or try overriding each property that is changed by the class. Or you can try Option 2.

Option 2 - Use a `router-link` as the slot directly

      <el-menu-item index="my-menu-item">
        <router-link :to="{name:'routeName'}">
          To new route
        </router-link>
      </el-menu-item>

This will work better for styling and in general. It is what I went with.

回复收藏 0 原文

彻夜缠绵 2025-01-16 09:17:10

您需要在el-menu-item内添加锚标记。

 <el-menu-item index="4">
     <a href="https://www.ele.me" target="_blank">
        <el-icon><DocumentChecked /></el-icon>
        <span>Menu 1</span>
    </a>
</el-menu-item>

<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Simple Link</a></el-menu-item>

You need to add anchor tag inside el-menu-item.

 <el-menu-item index="4">
     <a href="https://www.ele.me" target="_blank">
        <el-icon><DocumentChecked /></el-icon>
        <span>Menu 1</span>
    </a>
</el-menu-item>

<el-menu-item index="4"><a href="https://www.ele.me" target="_blank">Simple Link</a></el-menu-item>

回复收藏 0 原文

~没有更多了~