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;

    }

 

这样就可以啦。