new vue({
el:"#list",
//vue实例数据
data(){
return{
menuShow : false,
menuLeft : 0,
menuTop : 0,
}
},
//获取当前元素距离body原点的距离
methods:{
getElementToPageTop: function (el) {
if (el.offsetParent) {
return this.getElementToPageTop(el.offsetParent) + el.offsetTop;
}
return el.offsetTop;
},
getElementToPageLeft: function (el) {
if (el.offsetParent) {
return this.getElementToPageLeft(el.offsetParent) + el.offsetLeft;
}
return el.offsetLeft;
}
}
directives: {
menus: {
inserted: function (el, binding, vnode) {
//获取vue实例对象
let vm = vnode.context;
let showFlag = true;
vnode = vnode.elm;
//阻止默认浏览器的右键菜单
el.oncontextmenu = ((event) => {
event.preventDefault();
});
el.onmouseup = ((event) => {
if (event.button === 2) {
vm.menuShow = true;
showFlag = false;
let realTop = vm.getElementToPageTop(vnode);
let realLeft = vm.getElementToPageLeft(vnode);
let top = event.pageY - realTop + 5 + 'px';
let left = event.pageX - realLeft + 5 + 'px';
vm.menuLeft = left;
vm.menuTop = top;
}
});
document.onmouseup = (() => {
if (showFlag) {
vm.menuShow = false;
}
showFlag = true;
});
}
}
}
})
慕斯4360584
慕慕5436299
慕慕5436299
相关分类