vue鼠标右键自定义菜单_vue(element-ui)实现右键菜单（仅需三步）

最新推荐文章于 2024-07-05 17:10:40 发布
最新推荐文章于 2024-07-05 17:10:40 发布
阅读量3.3k 收藏 2
点赞数
文章标签： vue鼠标右键自定义菜单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_31925745/article/details/112016488
版权
本文介绍了如何使用Vue和Element-UI实现鼠标右键的自定义菜单。通过在DOM中创建一个div，结合data属性和样式设置，以及监听事件来控制菜单的显示和隐藏。在el-table中添加右键点击事件，处理方法包括显示和隐藏菜单，以及根据鼠标位置调整菜单的位置。
摘要由CSDN通过智能技术生成

一、效果如图

image.png

二、具体实现

1.首先，在Dom中新建一个div(data中别忘menuVisible，用来控制菜单是否显示)

v-show="menuVisible"

class="menu">

@click="ShowView(CurrentRow)">查看

@click="EditData(CurrentRow)">修改

2.style给上样式

.contextmenu__item {

display: block;

line-height: 34px;

text-align: center;

}

.contextmenu__item:not(:last-child) {

border-bottom: 1px solid rgba(0, 0, 0, 0.1);

}

.menu {

position: absolute;

background-color: #fff;

width: 100px;

/*height: 106px;*/

font-size: 12px;

color: #444040;

bor

最低0.47元/天 解锁文章
F1BigData
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+element-ui添加自定义右键菜单的方法示例
01-21
1、在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件 ...... 2、在页面编写右键菜单内容 上移一层 下移一层 3、在data()中定义需要的变量属
element table右键菜单
weixin_47180815的博客
03-26 2373
row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event 重要代码 //右键点击事件 rightClick(row, column, event) { console.log(arguments); var menu = document.querySelector("#menu"); event.preventDefault(); //获取我们自定义的右键菜单 // 根据事.
Vue 中实现动态右键菜单
最新发布
weixin_71329368的博客
07-05 541
实现一个动态右键菜单。这个菜单能够根据用户的点击位置动态调整其显示位置，确保菜单始终在浏览器窗口的可视区域内。这样的实现可以提升用户体验，使应用更加友好和易用。
vue右键自定义菜单
weixin_50338974的博客
08-09 447
监听contextmenu事件，事件触发时，记录鼠标位置，显示菜单列表。在下面box范围内右键显示自定义菜单（代码为结构和样式）openMenu方法。
VUE项目中使用【vue-contextmenujs】自定义右键菜单
sunshineTing2的博客
01-30 1299
【代码】VUE项目中使用【vue-contextmenujs】自定义右键菜单。
vue添加自定义右键菜单
热门推荐
qq_38143787的博客
06-28 1万+
一、写原生方法 1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for="item in resourceList" :key="item.id" @click="handleClickFolder(item)" @contextmenu.prevent="openMenu($event,item)" >
【JavaScript源代码】Vue+element-ui添加自定义右键菜单的方法示例.docx
12-30
### Vue + Element UI 添加自定义右键菜单的知识点解析 #### 一、概述 本文将详细介绍如何在基于Vue.js框架的项目中结合Element UI库，实现一个简单的自定义右键菜单功能。通过以下步骤，您将了解到从创建绑定事件...
vue-element-admin_vue-element_vue-element-admin_elementadmin官网_v
10-02
Element UI 是一套基于 Vue.js 的高质量UI组件库，它提供了丰富的界面元素，如表格、按钮、提示、下拉菜单等，适用于企业级后台管理系统。Vue Element Admin 是基于 Vue.js 和 Element UI 构建的一个后台管理系统...
VUE.js+element-ui实现JSON编辑器
02-17
Vue.js和Element-UI是现代前端开发中常用的两个框架，Vue.js作为一个轻量级的JavaScript框架，以其易学易用、高效和灵活的特点受到了广大开发者喜爱。而Element-UI则是一套基于Vue.js的组件库，提供了丰富的UI组件，...
毕业设计项目-个人博客。前端基于Vue，Element-UI和Vue-Element-Admin实现，后台采用SpringBoot+MybatisPlus+Rd
07-09
Vue-Element-Admin则是一个基于Vue.js和Element-UI的后台管理系统模板，它包含了一套完整的管理端页面结构和基础功能，如登录、权限控制、多语言支持等，大大简化了前端开发的工作量。在本项目中，Vue-Element-Admin...
vue项目中添加自定义右键菜单
qq_41893334的博客
09-06 985
简单的添加邮件菜单的demo
elementui表格右键菜单例子.vue
04-08
elementui表格上右键单击弹出菜单项，点击菜单调用后续方法
Vue20右键菜单组件菜单内容可以随意自定义
08-12
Vue 2.0 右键菜单组件，菜单内容可以随意自定义
vue添加自定义右键菜单的完整实例
01-18
一、写原生方法 1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： <li v-for=item key=item.id click=handleClickFolder(item) contextmenu.prevent=openMenu($event,item) > ... </li> 2.在页面编写右键菜单内容: <ul v-show=visible :style={left:left+'px',top:top+'px'} clas
element-tree:自定义右键菜单等等
05-11
元素树 一个Vue.js项目 效果 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report 有关工作原理的详细说明，请查看的和。
vue自定义页面右击菜单栏
weixin_54902466的博客
12-08 1828
自定义页面右击菜单栏
element 右键菜单
weixin_30920853的博客
07-01 1556
右键菜单 这是一个右键菜单的组件 <template> <div id="dropMenu" :style="style" style="display: block;" v-show="show" @mousedown.stop <!--阻止冒泡事件--> @...
Element 右键菜单
大白的博客
02-25 969
添加右键事件 <el-tree :data="data" node-key="id" @node-contextmenu="onContextShow" ></el-tree> 菜单 import Contextmenu from "vue-context-menu"; <Contextmenu ref="contextmenu" class="context-menu"> <el-cascader-panel :options="optio
vue2项目实现自定义右键菜单, 可添加图标、事件等
qq_37312180的博客
01-25 1908
contextMenuData中，label是文字，onClick是绑定的点击事件，icon是图标，我这里用的阿里的iconfont，如果想使用ElementUI的图标，可以把icon的值设置为 icon el-icon-edit。原文链接：https://blog.csdn.net/weixin_42289279/article/details/132604501。3. 在需要实现自定义右键的元素上加上 @contextmenu.prevent="onContextmenu"通常浏览器都会有自己的。
elementui树状菜单tree_vue+element-ui实现无限级动态菜单树
05-18
要实现一个无限级动态菜单树，可以使用 Element UI 的 Tree 组件。以下是一个简单的实现示例： 首先，需要在 Vue 中引入 Element UI 的 Tree 组件： ```javascript import { Tree } from 'element-ui'; ``` 然后，可以在 Vue 的模板中使用 `el-tree` 标签来渲染 Tree 组件： ```html <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree> ``` 其中，`menuData` 是菜单数据，`treeProps` 是 Tree 组件的属性配置对象，`handleNodeClick` 是 Tree 组件的点击事件处理函数。 接下来，我们来看一下如何实现动态加载菜单数据。首先，需要在 Vue 的 `mounted` 生命周期中调用一个方法来获取菜单数据： ```javascript mounted() { this.getMenuData(); }, methods: { getMenuData() { // 通过接口获取菜单数据 } } ``` 接着，在菜单数据获取成功后，需要将数据转换成符合 Tree 组件要求的格式，并将数据保存在 Vue 实例的 `menuData` 属性中： ```javascript getMenuData() { // 通过接口获取菜单数据 // 将数据转换成符合 Tree 组件要求的格式 const menuData = convertMenuData(data); // 将数据保存在 Vue 实例的 menuData 属性中 this.menuData = menuData; } ``` 最后，我们来看一下如何处理 Tree 组件的点击事件。在 `handleNodeClick` 方法中，可以根据节点的 `level` 属性来判断当前节点是否为叶子节点。如果是叶子节点，则可以执行相应的操作，比如打开对应的页面；否则，需要递归获取子节点的数据并更新 Tree 组件的数据源： ```javascript handleNodeClick(node) { if (node.level === 2) { // 点击了叶子节点，执行相应操作 // 比如打开对应的页面 window.location.href = node.url; } else { // 点击了非叶子节点，递归获取子节点数据并更新 Tree 组件的数据源 const childNodes = await this.getChildNodes(node); node.children = childNodes; this.menuData = [...this.menuData]; } }, async getChildNodes(node) { // 通过接口获取子节点数据 const childNodesData = await getChildrenData(node.id); // 将数据转换成符合 Tree 组件要求的格式 const childNodes = convertMenuData(childNodesData); return childNodes; } ``` 至此，一个简单的无限级动态菜单树就实现了。完整的代码可以参考下面的示例： ```html <template> <el-tree :data="menuData" :props="treeProps" @node-click="handleNodeClick"></el-tree> </template> <script> import { Tree } from 'element-ui'; export default { components: { [Tree.name]: Tree }, data() { return { menuData: [], treeProps: { label: 'name', children: 'children' } }; }, mounted() { this.getMenuData(); }, methods: { async getMenuData() { // 通过接口获取菜单数据 const data = await getMenuData(); // 将数据转换成符合 Tree 组件要求的格式 const menuData = convertMenuData(data); // 将数据保存在 Vue 实例的 menuData 属性中 this.menuData = menuData; }, async handleNodeClick(node) { if (node.level === 2) { // 点击了叶子节点，执行相应操作 // 比如打开对应的页面 window.location.href = node.url; } else { // 点击了非叶子节点，递归获取子节点数据并更新 Tree 组件的数据源 const childNodes = await this.getChildNodes(node); node.children = childNodes; this.menuData = [...this.menuData]; } }, async getChildNodes(node) { // 通过接口获取子节点数据 const childNodesData = await getChildrenData(node.id); // 将数据转换成符合 Tree 组件要求的格式 const childNodes = convertMenuData(childNodesData); return childNodes; } } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值