<!--template-->
<ul>
  <li class="role_list" 
	v-for="(item,index) in role" 
	:key="index"
	@contextmenu.prevent="(e)=>{
		x_index = e.layerX;
	    y_index = e.layerY;
		ctrlId = item.id;
		showMenu = true;
	}">
	  <img :src="/UploadFiles/2021-04-02/item.head_portrait">

需要的参数(x,y,id)都具备了，因为右键操作很多地方都用到了，所以封装成了一个组件
right_menu.vue 组件代码



参数名

注释 x x坐标 y y坐标 showMenu 显示状态


  
    
      参数名
      注释
    
  
  
    
      x
      x坐标
    
    
      y
      y坐标
    
    
      showMenu
      显示状态
    
  


组件使用



<template>
  <div class="modal_data_box">
    <ul>
      <li class="role_list" 
        v-for="(item,index) in role" 
        :key="index"
        @contextmenu.prevent="(e)=>{
          x_index = e.layerX;
          y_index = e.layerY;
          ctrlId = item.id;
          showMenu = true;
        }">
        <img :src="/UploadFiles/2021-04-02/item.head_portrait">


修复漏洞
d[o_0]b同学发现了一个漏洞，就是当鼠标在屏幕右边点击时，菜单会被遮挡住，这边做了一些调整。
修复前：



//原来的代码
<ul>
  <li class="role_list" 
	v-for="(item,index) in role" 
	:key="index"
	@contextmenu.prevent="(e)=>{
		x_index = e.layerX;
	    y_index = e.layerY;
		ctrlId = item.id;
		showMenu = true;
	}">
	  <img :src="/UploadFiles/2021-04-02/item.head_portrait">

修复后：



//修改后的代码，（由于要判断，所以单独写了个方法，把e跟item都传过去）
<ul>
	<li class="role_list" 
		v-for="(item,index) in role" 
		:key="index"
		@contextmenu.prevent="(e)=>{
			rightClick(e,item)
		}">
		<img :src="/UploadFiles/2021-04-02/item.head_portrait">

总结
以上所述是小编给大家介绍的vue 自定义右键样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

                                
                                

                                    vue,自定义右键样式,vue,右键样式