整理文档，搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码

最新推荐文章于 2024-08-16 08:20:57 发布
最新推荐文章于 2024-08-16 08:20:57 发布
阅读量1w 收藏 2
点赞数
文章标签： contextmenu 文档 实例 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_39430615/article/details/78213042
版权

整理文档，搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码，稍微整理精简一下做下分享。 

1.事情对象

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
< html >
< head >
   < title ></ title >
   < meta charset = "utf-8" >
   < script src = "http://unpkg.com/vue/dist/vue.js" ></ script >
 
   < script type = "text/javascript" >
     window.onload = function(){
       var vm = new Vue({
         el:'#box',
         methods:{
           show:function(event){
             console.log(event);  //event  这个就是事件对象了
           }
         }
       });
     }
   </ script >
</ head >
< body >
   < div id = "box" >
     < input type = "button" value = "按钮" @ click = "show($event)" >
   </ div >
</ body >
</ html >

通过show($event)把事件对象传到方法里

2.事件冒泡

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
< html >
< head >
   < title ></ title >
   < meta charset = "utf-8" >
   < script src = "http://unpkg.com/vue/dist/vue.js" ></ script >
 
   < script type = "text/javascript" >
     window.onload = function(){
       var vm = new Vue({
         el:'#box',
         methods:{
           show:function(){
             alert(1);
           },
           show1:function(){
             alert(2);
           }
         }
       });
     }
   </ script >
</ head >
< body >
   < div id = "box" >
     < div @ click = "show1()" >
       < input type = "button" value = "按钮" @ click = "show()" >
     </ div >
   </ div >
</ body >
</ html >

点击按钮的话他会，执行show ,show1方法，依次弹出1，2。

怎么来阻止

<1> 利用我们上面讲过的event对象:  event.cancelBubble = true;   //这种就阻止了

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html >
< head >
   < title ></ title >
   < meta charset = "utf-8" >
   < script src = "http://unpkg.com/vue/dist/vue.js" ></ script >
 
   < script type = "text/javascript" >
     window.onload = function(){
       var vm = new Vue({
         el:'#box',
         methods:{
           show:function(event){
             alert(1);
             event.cancelBubble = true;
           },
           show1:function(){
             alert(2);
           }
         }
       });
     }
   </ script >
</ head >
< body >
   < div id = "box" >
     < div @ click = "show1()" >
       < input type = "button" value = "按钮" @ click = "show($event)" >
     </ div >
   </ div >
</ body >
</ html >

<2>利用vue的方法阻止冒泡：给HTML元素绑定click事件的时候，改为@click.stop="show()"

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
< html >
< head >
   < title ></ title >
   < meta charset = "utf-8" >
   < script src = "http://unpkg.com/vue/dist/vue.js" ></ script >
 
   < script type = "text/javascript" >
     window.onload = function(){
       var vm = new Vue({
         el:'#box',
         methods:{
           show:function(event){
             alert(1);
             //event.cancelBubble = true;
           },
           show1:function(){
             alert(2);
           }
         }
       });
     }
   </ script >
</ head >
< body >
   < div id = "box" >
     < div @ click = "show1()" >
       < input type = "button" value = "按钮" @ click.stop = "show()" >
     </ div >
   </ div >
</ body >
</ html >

3.默认行为

比如contextmenu右键菜单

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
< html >
< head >
   < title ></ title >
   < meta charset = "utf-8" >
   <!-- // <script src="vue.js"></script> -->
   < script src = "http://unpkg.com/vue/dist/vue.js" ></ script >
 
   < script type = "text/javascript" >
     window.onload = function(){
       var vm = new Vue({
         el:'#box',
         methods:{
           show:function(){
             alert(1);
           },
           show1:function(){
             alert(2);
           }
         }
       });
     }
   </ script >
</ head >
< body >
   < div id = "box" >
     < input type = "button" value = "按钮" @ contextmenu = "show()" >
     < input type = "button" value = "按钮1" @ contextmenu.prevent = "show1()" >
 
     < p >//按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单</ p >
     < p >//按钮1右击只出现 弹窗 2</ p >
   </ div >
</ body >
</ html >
Goddess_liangyanli
关注
vue项目右键弹出菜单
weixin_47783830的博客
07-11 1952
右键唤出菜单
vcontextmenu适用于Vue20的ContextMenu组件
08-08
v-contextmenu
vue中，右键菜单组件v-contextmenu的使用
热门推荐
weixin_44867717的博客
07-04 1万+
vue插件
**精彩推荐：Vue-Contextmenu——打造交互式右键菜单的完美解决方案**
最新发布
gitblog_00131的博客
08-16 986
精彩推荐：Vue-Contextmenu——打造交互式右键菜单的完美解决方案 vue-contextmenucontextmenu component for Vue2项目地址:https://gitcode.com/gh_mirrors/vu/vue-contextmenu 在前端开发中，上下文菜单（即右键菜单）是一个常见的功能需求。它们不仅可以提供直观的界面操作方式，还能提升用户体验。今天，...
vue 右键菜单插件_vue 2的鼠标右键菜单插件
cuk5239的博客
07-21 696
vue 右键菜单插件 上下文菜单 (context-menu) A right-mouse menu plug-in for Vue.js 2+ 适用于Vue.js的鼠标右键菜单插件2+ 如何使用 (How to Use) npm install vue-mouse-menu --save import mouseMenu from 'vue-mouse-menu' import Vue...
vue-contextmenu
05-09
vue-contextmenu Feature 右键菜单 多级子菜单 自定义item render 自定义替换右键菜单组件 开发文档 使用方式 引入依赖 npm i @shymean/vue-contextmenu -S // 引入默认菜单样式，如果使用自定义菜单组件则无需引入 import '@shymean/vue-contextmenu/dist/index.css' import contextmenu from '@shymean/vue-contextmenu' const options = {} // 注册参数 // 注册全局 v-contextmenu 指令 Vue.use(contextmenu, options) 支持注册参数 name 指令名称, 默认contextmenu menuComponent菜单组件，默认使用内置的Menu组件，可传入自定义菜单组件展示 自
vue2使用v-contextmenu右键菜单组件，小白教程
weixin_68397463的博客
04-07 1192
注意右键组件是最高层级页面，封装使用需要用到插槽！
vue2.0的contextmenu右键弹出菜单的实例代码
12-08
整理文档，搜刮出一个vue2.0的contextmenu右键弹出菜单的实例代码，稍微整理精简一下做下分享。 1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset="utf...
【JavaScript源代码】vue添加自定义右键菜单的完整实例.docx
12-29
例如，`vue-context-menu`是一个方便的Vue插件，允许你更简单地创建和管理右键菜单。安装它： ```bash npm install vue-contextmenu --save ``` 然后在你的应用中引入并使用它： ```javascript import ...
v-contextmenu：on基于Vue 2.0的ContextMenu
02-06
适用于Vue 2.0的ContextMenu组件。 中文| 安装 CDN约会 可通过获取最新版本的资源，在页面中追加相应的js和css文件即可。 <!-- 引入 Vue --> < script src =" https://unpkg.com/vue/dist/vue.js " > &...
vue-context-menu鼠标右键事件
poplargg的博客
09-10 5172
第一步：安装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
JavaScript右键菜单插件
09-11
自己写的JavaScript的小组件，初步融入了vueJS，没有使用jquery的js组件，希望能够帮到大家，也可以提出宝贵意见或是建议共同努力，一起进步。解压密码rightMenu。具体使用可以查看文件中的具体注释。
vue 鼠标右击出菜单事件
weixin_41463944的博客
09-02 756
1、npm install vue-contextmenu --save 2、引入 import VueContextMenu from 'vue-contextmenu' Vue.use(VueContextMenu) 3、代码： <template> <div> <div style="width: 100px;height: 100px;margin-top: 20px;background: red;" @contextmenu="showMenu"&gt
v-contextmenu 项目教程
gitblog_00914的博客
08-09 280
v-contextmenu 项目教程 v-contextmenu项目地址:https://gitcode.com/gh_mirrors/vcon/v-contextmenu 1. 项目的目录结构及介绍 v-contextmenu 项目的目录结构如下： v-contextmenu/ ├── dist/ │ ├── index.js │ ├── themes/ │ │ ├── def...
vue怎么实现右键二级菜单_Vue中怎么实现的跨平台
weixin_39536427的博客
12-30 104
作者简介????????????把握青春❤️创造奇迹????????????看一下Vue中实现跨平台代码，主要是patch方法nodeOps:import { namespaceMap } from 'web/util/index'export function createElement (tagName: string, vnode: VNode): Element { const...
vue-contextmenu右键点击菜单栏
coolgirljsinw的博客
03-13 1661
在我使用这个插件的的时候，出现了问题，一个是刷新完之后 第一次点击出现的右侧菜单栏 位置是不正确，二是跟随滚动。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
千里之行，始于足下！
03-29 3015
右键弹出菜单组件 vue-context-menu
【实例】v-contextmenu右键菜单组件
weixin_44867717的博客
07-04 680
vue组件
v-contextmenu的使用(右键菜单）
weixin_30408309的博客
01-10 1万+
先来个自己改写的图： 代码： 结构：<div class="wrap" v-contextmenu:contextmenu><v-contextmenu ref="contextmenu"> <v-contextmenu-item ><i class="fa fa-search"></i>上插入&...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值