组件使用
<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>
修复漏洞 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="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;
},
总结 以上所述是小编给大家介绍的vue 自定义右键样式，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对社区网站的支持！ | |||||||||||
转播
