<template>
<div class="page">
<!-- @contextmenu鼠标右键显示菜单事件 -->
<!-- 给vue组件绑定事件时候,组件加上.native才能监听原生事件,否则会认为监听的是来自Item组件自定义的事件, -->
<!-- .prevent用来阻止浏览器默认事件,因浏览器右键会显示自己设置好的菜单所以需要设置默认阻止事件 -->
<!-- <el-button type="primary" @contextmenu.prevent.native="openMenu($event)"
>右键显示菜单</el-button
> -->
<!-- 因右键自定义菜单事件需要获取当前点击的位置,所以此处绑定动态样式来控制菜单实时跟踪鼠标右键点击位置 -->
<ul
v-show="visible"
:style="{ left: left + 'px', top: top + 'px' }"
class="contextmenu"
>
<li v-for="item in menuList" :key="item.code" @click="clickMenu(item)">
{{ item.name }}
</li>
</ul>
</div>
</template>
<script>
export default {
components: {},
props: {
rightDiv: {
type: Object,
required: false,
},
},
data() {
return {
patInfo: {},
menuList: [],
visible: false,
top: 0,
left: 0,
};
},
watch: {
// rightDiv: {
// handler(val) {
// console.log('dataObj deep change', val)
// this.openMenu(val)
// },
// deep: true, // 深度监听
// immediate: true, // 初次监听即执行
// },
visible(newValue, oldValue) {
if (newValue) {
//菜单显示的时候
// document.body.addEventListener,document.body.removeEventListener它们都接受3个参数
// ("事件名" , "事件处理函数" , "布尔值");
// 在body上添加事件处理程序
document.body.addEventListener("click", this.closeMenu);
} else {
//菜单隐藏的时候
// 移除body上添加的事件处理程序
document.body.removeEventListener("click", this.closeMenu);
}
},
},
mounted() {},
methods: {
clickMenu(item) {
const allObj = {};
allObj.menuObj = item;
allObj.patInfo = this.patInfo;
this.$emit("seleItem", allObj);
},
//右击
openMenu(e, patInfo, menu) {
var x = e.pageX; //这个应该是相对于整个浏览器页面的x坐标,左上角为坐标原点(0,0)
var y = e.pageY; //这个应该是相对于整个浏览器页面的y坐标,左上角为坐标原点(0,0)
this.top = y;
this.left = x;
this.visible = true; //显示菜单
this.menuList = menu;
this.patInfo = patInfo;
},
//关闭菜单
closeMenu() {
this.visible = false; //关闭菜单
},
},
};
</script>
<style scoped>
.contextmenu {
margin: 0;
background: #fff;
z-index: 3000;
position: fixed;
list-style-type: none;
padding: 5px 0;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: #333;
box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
.contextmenu li {
margin: 0;
padding: 10px 20px;
cursor: pointer;
}
.contextmenu li:hover {
background: #b3d8ff;
}
</style>
上面为右键组件代码
在要使用组件的地方引入
定义右击事件,通过$refs事件调用右击菜单组件的openMenu事件。传递数据
rightMenuList为右键菜单栏
通过上图自定义的seleItem事件传递点击右键菜单的某个属性