vue 自定义右键样式的实例代码

<!--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="item.head_portrait" alt="">
	  <p>{{item.name}}</p>
	</li>
</ul>

<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="item.head_portrait" alt="">
        <p>{{item.name}}</p>
      </li>
    </ul>
	<!--组件-->
	<right-menu :x="x_index"
	      :y="y_index" 
	      :showMenu="showMenu"
	      @close="closeMenu"
	      @open="openDetail"
	      @del="delAttr"
	      @update="updateArr">
	</right-menu>
  </div>
</template>
<script>
  // 导入组件
	import rightMenu from '../module/right_menu.vue';
	export default{
		name:"roleModal",
		components:{rightMenu},
		data(){
			return {
				x_index:0,
				y_index:0,
				ctrlId:'',
				showMenu:false,
				role:[],
			}
		},
		methods:{
		  //关闭回调 
		  closeMenu(state){
		    console.log('关闭')
		    this.showMenu = state;
		  },
		  //打开详情回调 			
		  openDetail(){
		    console.log('编辑')
		  },
		  //删除回调 			
		  delAttr(){
		    console.log('删除')
		  },
		  //编辑回调 			
		  updateArr(){
		    console.log('编辑')
		  },
		}
	}
</script>

//原来的代码
<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="item.head_portrait" alt="">
	  <p>{{item.name}}</p>
	</li>
</ul>

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

//对应的rightClick方法
rightClick(e,item){
	// 屏幕可见宽
	let clientWidth = document.body.clientWidth;
	// 菜单宽
	let menuWidth = 150;
	// 点击右键时会返回对应的clientX，用这个值与(clientWidth+菜单宽度)对比，如果大于的话，就把菜单左偏移一个菜单宽
	let clickClientX = e.clientX + menuWidth
	if(clickClientX > clientWidth){
		console.log("菜单超出视线范围")
		this.x_index = e.layerX - menuWidth;
	}else{
		this.x_index = e.layerX;
	}
	this.y_index = e.layerY;
	this.ctrlId = item.id;
	this.showMenu = true;
},