vue2.0中怎么利用contextmenu实现右键弹出菜单功能

  
  
  

  
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        methods:{
          show:function(event){
            console.log(event);  //event  这个就是事件对象了
          }
        }
      });
    }
  


  
     
  

  
  
  

  
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        methods:{
          show:function(){
            alert(1);
          },
          show1:function(){
            alert(2);
          }
        }
      });
    }
  


  
    
       
    

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

怎么来阻止

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

  
  
  

  
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        methods:{
          show:function(event){
            alert(1);
            event.cancelBubble = true;
          },
          show1:function(){
            alert(2);
          }
        }
      });
    }
  


  
    
       
    
  

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

  
  
  

  
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        methods:{
          show:function(event){
            alert(1);
            //event.cancelBubble = true;
          },
          show1:function(){
            alert(2);
          }
        }
      });
    }
  


  
    
       
    
  

3.默认行为

比如contextmenu右键菜单

  
  
  
  

  
    window.onload = function(){
      var vm = new Vue({
        el:'#box',
        methods:{
          show:function(){
            alert(1);
          },
          show1:function(){
            alert(2);
          }
        }
      });
    }
  


  
     
     

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

看完上述内容，你们掌握vue2.0中怎么利用contextmenu实现右键弹出菜单功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！