VUE 鼠標右鍵自定義

需要在區域內右擊自定義菜單的DIV綁定contextmenu右擊事件

    <div   style="width:100% ; z-index: inherit;position: relative;margin:0 auto ;" align="center"  @contextmenu.prevent="rightClick">

      <img  :src="dialogImg" style="width: 100%; " >

      <div  :style="dialogPos.style" align="center" >{{dialogPos.position}}</div>

      <div  :style="dialogPos.styleT" align="center" ></div>

    </div>

 

觸發rightClick方法

            rightClick(MouseEvent) { // 鼠標右擊觸發事件

                this.menuVisible = false; // 先把模態框關死，目的是 第二次或者第n次右鍵鼠標的時候 它默認的是true

                this.menuVisible = true ; // 顯示模態窗口，跳出自定義菜單欄

                var menu = document.querySelector('#menu');

                menu.style.left = MouseEvent.clientX-160 + 'px';

                document.addEventListener('click', this.foo); // 給整個document添加監聽鼠標事件，點擊任何位置執行foo方法

                menu.style.top = MouseEvent.clientY-100 + 'px'

            },

          foo() { // 取消鼠標監聽事件 菜單欄

                this.menuVisible = false;

                document.removeEventListener('click', this.foo) // 要及時關掉監聽，不關掉的是一個坑，不信你試試，雖然前台顯示的時候沒有啥毛病，加一個alert你就知道了

            },

 

右鍵菜單模態框

  <div v-show="menuVisible">

    <ul id="menu" class="menu">

      <a><li class="menu__item" style="margin-top: 3px;"  @click="JumpcarDynamicQuery">檢索1</li></a>

      <a><li class="menu__item"  @click="JumpcarCarStaticQuery">檢索2</li></a>

      <a><li class="menu__item"  @click="JumpDynamicQuery">檢索3</li></a>

      <a><li class="menu__item"  @click="JumpcarPasserDynamicQuery">檢索4</li></a>

    </ul>

  </div>

 

右鍵菜單樣式

    .menu__item {

      display: block;

      line-height: 20px;

      text-align: center;

      /*margin-top: 10px;*/

    }

    .menu {

      height: 85px;

      width: 90px;

      position: absolute;

      border-radius: 10px;

      border: 1px solid #999999;

      background-color: #f4f4f4;

      z-index: 99999;

      padding-inline-start: 0px;

    }

 

這樣就可以啦。