new vue({ el:"#list", //vue實(shí)例數(shù)據(jù) data(){ ? ? return{ ? ? ? ? menuShow : false, ? ? ? ? menuLeft : 0, ? ? ? ? menuTop : 0, ? ? } }, //獲取當(dāng)前元素距離body原點(diǎn)的距離 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實(shí)例對(duì)象 ? ? ? ? let vm = vnode.context; ? ? ? ? let showFlag = true; ? ? ? ? vnode = vnode.elm; ? ? ? ? //阻止默認(rèn)瀏覽器的右鍵菜單 ? ? ? ? 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; ? ? ? ? }); ? ? ? } ? ? } } })