vue右击弹窗_Vue.js2.0的contextmenu右键弹出菜单的实例代码

Vue.js2.0的contextmenu右键弹出菜单的实例代码

发布于 2020-6-28|

复制链接

本篇文章主要介绍了vue2.0的contextmenu右键弹出菜单的实例代码，小妖觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小妖过来看看吧

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

```xhtml

window.onload = function(){

var vm = new Vue({

el:'#box',

methods:{

show:function(event){

console.log(event); //event 这个就是事件对象了

}

}

});

}

```

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

```xhtml

window.onload = function(){

var vm = new Vue({

el:'#box',

methods:{

show:function(){

alert(1);

},

show1:function(){

alert(2);

}

}

});

}

```

点击按钮的话他会，执行show ,show1方法，依次弹出1，2。怎么来阻止 利用我们上面讲过的event对象:  event.cancelBubble = true;   //这种就阻止了

```xhtml

window.onload = function(){

var vm = new Vue({

el:'#box',

methods:{

show:function(event){

alert(1);

event.cancelBubble = true;

},

show1:function(){

alert(2);

}

}

});

}

```

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

```xhtml

window.onload = function(){

var vm = new Vue({

el:'#box',

methods:{

show:function(event){

alert(1);

//event.cancelBubble = true;

},

show1:function(){

alert(2);

}

}

});

}

```

3.默认行为比如contextmenu右键菜单

```xhtml

-->

window.onload = function(){

var vm = new Vue({

el:'#box',

methods:{

show:function(){

alert(1);

},

show1:function(){

alert(2);

}

}

});

}

//按钮右击点下去会依次出现 弹窗 1， 还有右击的默认菜单

//按钮1右击只出现 弹窗 2

```