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; }); } } } })
添加回答
举报
0/150
提交
取消