vue 右键单击 实现

vue 中右键单击自定义菜单实现

• 右键单击执行事件

// table的右键点击当前行事件
    rightClick(row) {
      //获取我们自定义的右键菜单
      var menu = document.querySelector("#menu");
      event.preventDefault();
      // 初始化右键菜单数据
      this.initMenu(row);
      // 根据事件对象中鼠标点击的位置，进行定位
      menu.style.left = event.clientX + "px";
      menu.style.top = event.clientY + "px";
      // 改变自定义菜单的隐藏与显示
      this.showMenu = true;
      this.currentRowData = row;
    },

• 自定义菜单模块如下

	<div id="menu" v-show="showMenu">
        <div
          class="menu"
          v-for="(item, index) in menus"
          :key="index"
          @click.stop="infoClick(item)"
        >{{ item }}</div>
     </div>

• 右键单击(生效区域)绑定Event

<div class="person-info" @contextmenu.prevent="rightClick(item)">...</div>

记录一下