vue2中自定义右击菜单--vue-contextmenujs

最新推荐文章于 2024-03-14 14:28:14 发布
最新推荐文章于 2024-03-14 14:28:14 发布
阅读量955 收藏 10
点赞数 16
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lixu_boke/article/details/135227567
版权

第一步我们先安装这个依赖

npm install vue-contextmenujs

第二步把我们的依赖引入到全局中

import Contextmenu from 'vue-contextmenujs';

Vue.use(Contextmenu)

第三步在我们需要右击菜单的代码上增加如下代码

第四步在方法中写入方法

当然其中还是有很多别的属性，比如label、icon、hidden、onClick等等，基本上这些已经满足我们日常使用了

接下来看一下成品

lixu_boke
关注
  • 16
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue自定义右键菜单 -vue2版
09-09
vue自定义右键菜单 -vue2版 vue自定义右键菜单 js右键菜单
VUE右键菜单 vue-contextmenujs的使用
ZMJ_QQ的博客
09-15 7275
VUE右键菜单 vue-contextmenujs的使用
TS使用 ‘vue-context-menu‘；右键打开菜单，内附安装流程
最新发布
chabaimgg的博客
03-14 406
3.右击tree的节点发生的事件，阻止冒泡和默认事件，然后启用vue-contextMenu的方法。安装使用vue-context-menu流程。
vue-context-menu-vue js的上下文菜单组件。-Vue.js开发
05-27
vue-context-menu vue上下文菜单组件演示：https://vmaimone.github.io/vue-context-menu示例用法
Vue右键菜单vue-contextmenu
mo911108的博客
08-11 3594
1.安装 npm install vue-contextmenu --save 2.main.js引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 3.组件内使用 <ul class="nav taskPanel"> <li v-for="(item, index) in taskList" :key="it.
右键菜单组件vue——显示在光标跟前
Thea的博客
05-26 630
需求： 鼠标右击显示菜单 菜单分组显示，中间用横线隔开 鼠标悬浮在具体菜单内容时添加背景色 菜单显示在光标附近，默认显示在右下侧，要考虑边缘情况 左击菜单关闭 选中内容后菜单关闭 我们将显示的菜单写成一个组件 父组件中右击，在光标附近显示子组件 子组件 context-menu.vue 我们从最简单的开始，完成以下功能： 菜单分组，并用横线分割； 鼠标悬浮时添加背景色； 点击内容时，将选中值传到父组件。 <template> <div class="theContextM
Vue右键菜单(vue-contextmenu)
Codernmx
02-05 1万+
使用右键点击出现删除，以及更多操作菜单，需要多个可以在注释//菜单选项处menulists下多添加几个对象，并且绑定需要响应的methods 安装 npm install vue-contextmenu --save main.js引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 使用 <template> <div id="app"
右键弹出菜单组件 vue-context-menu
千里之行，始于足下！
03-29 2520
右键弹出菜单组件 vue-context-menu
vue-contextmenu右键点击菜单栏
coolgirljsinw的博客
03-13 1461
在我使用这个插件的的时候，出现了问题，一个是刷新完之后 第一次点击出现的右侧菜单栏 位置是不正确，二是跟随滚动。6.事件操作 （大部分的示例中都没有传点击参数，注意！是我根据自己的数据进行了调整，需注意 ）1.阻止浏览器默认事件 @contextmenu.prevent="show($event)"4.使用插件 <vue-context-menu></vue-context-menu>2.下载包 npm install vue-contextmenu --save。3.在mian.js里面引入。
vue-context-menu鼠标右键事件
poplargg的博客
09-10 5030
第一步：安装vue-context-menu npm install @xunlei/vue-context-menu 第二步：在main.js中引用 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 第三步：给需要点击的元素绑定事件 <div @contextmenu="contextmenu" >右键点击我弹出菜单</div> 这是点击过后显示的菜单 <vue-context-me
vue
brrby
10-19 535
vue学习 vue大致模板： 引入链接：vue.js，提取码：uvrq 实例化vue对象 定义数据对象属性 定义函数 例如 <head> <script src="lib/vue.min.js"></script> <!-- 第一步：引入vue 第二步：实例化vue对象 el参数是DOM元素中的id，意味操作在指定id的元素内起作用，外部不受影响 data参数用于定义数据对象属性 methods参数用于定义函数
vue-context-menu:HTML元素的简单通用上下文菜单
03-08
添加上下文菜单 HTML元素的简单通用上下文菜单。 安装 # install with npm npm i add-context-menu 快速开始 # import add-context-menu import ContextMenu from ' add-context-menu ' import ContextMenuItem from ' add-context-menu ' Vue.use(ContextMenu) Vue.use(ContextMenuItem) 如何使用 # Put context-menu including context-menu-items closely next to the element that you want add customed context menu to. 例子 < div id= ' example '></div
在Vue中获取自定义属性方法:data-id的实例
10-14
主要介绍了在Vue中获取自定义属性方法:data-id的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue自定义表单生成器form-create使用详解
10-16
主要介绍了vue自定义表单生成器,可根据json参数动态生成表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
vue2自定义实现tag-input组件
11-24
vue2实现简单的tag-input标签输入框 支持： 1、限制输入类型，例如手机号码、邮箱等 2、删除tag 详细情况参考本篇文章： https://blog.csdn.net/weixin_43797046/article/details/127764764
vue2-gmap-custom-marker:Vue Google Map自定义标记组件
05-05
vue2-gmap-custom-marker 该组件使您可以使用叠加层在地图上显示自定义HTML内容。 该组件是与一些伟大的想法在谷歌地图V3覆盖代码示例改编从这个。 /！\ 重要的提示 该项目最初是的插件。 现在，该项目似乎不再受维护，并且已开始维护已维护的。由于这是一个派生，因此该插件应该看起来像在工作。 该项目的演示于2020-11-10开始使用此项目。 阅读以获取更多有关此的信息。 对于使用vue-google-maps的旧项目，您必须坚持使用该项目标签 。 您可能会在package.json中强制该插件的5.6.2版本保持兼容性，直到您想要切换到gmap-vue为止。 对于那些使用带有此插件的群集的用户，新版本可能会造成问题。 对于此插件网站演示，我必须创建，其中包含群集在vue-gmap中使用的群集图像。 如果您对此有疑问，只需在vue项目的公共文件夹中使用上面链接中
vue_ant-design-vue菜单递归
12-28
后台返回菜单无限层级展示
vue中，右键菜单组件v-contextmenu的使用
热门推荐
weixin_44867717的博客
07-04 1万+
vue插件
Vue实现右键菜单（vue-contextmenu模块）
Hello World
04-06 6182
文章目录*Vue实现右键菜单（vue-contextmenu模块）*一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 Vue实现右键菜单（vue-contextmenu模块） 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 代码如下（示例）： data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.csv') print(data.head()) 每天一个提升
vue3的自定义指令v-focus
10-10
v-focus自定义指令可以用于页面加载时自动聚焦到指定的输入框，这个指令可以在Vue3的setup函数中使用。示例代码如下： ``` <template> <input v-focus /> </template> <script> import { onMounted, ref } from 'vue'; export default { setup() { const inputRef = ref(null); onMounted(() => { inputRef.value.focus(); }); return { inputRef, }; }, }; </script> ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值