当前位置: 首页 > 知识库问答 >
问题:

javascript - Vue3 + Element Plus 实现动态标签页及右键菜单实现的问题?

穆轶
2024-04-05

在制作标签栏右击的选项中,使用右击选择不同标签的关闭
但是el-tab-pane中,加入 @contextmenu.prevent="this.openContextMenu($event)"失效,而el-tabs有效,但是我就不清楚点的那个标签了

    <el-tabs        type="card"        class="tab_class"        closable        @tab-remove="this.removeTab"        @tab-change="this.tabChange"    >      <el-tab-pane          class="tab_pane_class"          v-for="item in this.tabList"          :key="item.fullPath"          :name="item.fullPath"          :label="item.name"          @contextmenu.prevent="this.openContextMenu($event)"      >      </el-tab-pane>    </el-tabs>

然后请问一下还有别的方法吗?

https://blog.csdn.net/weixin_36757282/article/details/126578206
试了这个博客的的方法,但是加入 el-tab-pane循环中,直接报错,请大佬帮一下

共有1个答案

利稳
2024-04-05

使用tab-panelabel插槽来自定义标题内容 然后再监听自定义内容的contextmenu事件 这是一个示例

 类似资料:
  • 本文向大家介绍基于JavaScript实现智能右键菜单,包括了基于JavaScript实现智能右键菜单的使用技巧和注意事项,需要的朋友参考一下 通过本文给大家介绍智能右键菜单,需要引入的文件再文末会给出,先给大家展示下代码: 具体代码如下所示: $('th') 指定加右键的标签,根据实际来确定 我这里是加在表格的表头上,所以是th标签 e.which = 3 表示是右键 这里列出了两种情况 一种是

  • 本文向大家介绍jQuery EasyUI右键菜单实现关闭标签/选项卡,包括了jQuery EasyUI右键菜单实现关闭标签/选项卡的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了jQuery EasyUI右键菜单可以选择关闭标签/选项卡操作,供大家参考,具体内容如下 目录结构: noContextMenu.js 文件内容如下: 效果图: 方式一: 方式二:     以上就是本文的全部

  • 本文向大家介绍jquery实现右键菜单插件,包括了jquery实现右键菜单插件的使用技巧和注意事项,需要的朋友参考一下 今天开发一个项目的时候需要一个模拟鼠标右键菜单的功能。也就是在网页点击鼠标右键的时候不是弹出系统的菜单而是我们制定的内容。这样可以拓展右键的功能。实现过程不多说了,写出来的代码和效果如下: js部分: css部分代码如下: 创建调用代码如下: 销毁调用代码如下: 效果如下: 调用

  • 本文向大家介绍jQuery简单实现禁用右键菜单,包括了jQuery简单实现禁用右键菜单的使用技巧和注意事项,需要的朋友参考一下 代码非常简单,这里就不多废话了,直接上代码: 5行代码搞定,简单吧,当然小伙伴们可以自由扩展下,可以实现屏蔽右键菜单的指定项。

  • 本文向大家介绍JS简单实现自定义右键菜单实例,包括了JS简单实现自定义右键菜单实例的使用技巧和注意事项,需要的朋友参考一下 RT,一个简单的例子,仅仅讲述原理   假设我要把上面这个div设置为右键菜单,先随意美化一下。 原理就是利用contextmenu事件,右键点击时,会触发这个事件时,该事件对象可以获得鼠标距离页面左上角的距离clientX和clientY, 我们可以利用这两个属性,来控制d

  • 本文向大家介绍Jquery EasyUI Datagrid右键菜单实现方法,包括了Jquery EasyUI Datagrid右键菜单实现方法的使用技巧和注意事项,需要的朋友参考一下 最近在学Jquery EasyUI,现在来说一说EasyUI的DataGrid,一般当我们在实现前端界面的时候,经常在DataGrid的上面或者后面加一些按钮,方便用户进行一些添加,删除,编辑等功能 用户在每次使用的