v-contextmenujs 右键菜单点击

忙碌了一晚上的“枫师傅”用上了新插件v-contextmenujs，这个插件就按照他的文档来就行

我的使用：

<!-- 这里是demo.vue，之所以选择html是为了代码高亮 -->
<el-table-column label="操作" width="100" align="center" header-align="center">
  <template slot-scope="rows">
    <div class="menu" @contextmenu.prevent="onContextmenu($event,rows.row.name)" :pid="rows.row.id" :pname="rows.row.name">
      <p class="menu-text">操作 <i class="el-icon-d-arrow-right"></i></p>
    </div>
  </template>
</el-table-column>
<script>
export default {
	methods: {
		onContextmenu (event, id) {
		  event.preventDefault()
		  this.$contextmenu({
			items: [
			  {
				label: '详情',
				children: [
				  {
					label: '当前页打开'
				  },
				  {
					label: '新窗口打开'
				  }
				]
			  },
			  {
				label: '更新',
				onclick: async () => {
				}
			  },
			  {
				label: '删除',
				onclick: async () => {
				}
			  }
			],
			event,
			// x: event.clientX,
			// y: event.clientY,
			customClass: 'class-a',
			zIndex: 3,
			minWidth: 100
		  })
		  return false
		},
		handleScroll () {
			// 销毁菜单
		  this.$contextmenu.destroy()
		}
	},
	mounted () {
		document.addEventListener('DOMMouseScroll', () => {
			this.handleScroll()
		}, false)
	}
}

---

笔记：

• 使用.stop可以阻止事件冒泡
  例如：

  <div class="common-box">
  	<div class="a" @contextmenu.prevent="onContextmenua($event,1)">
  	  <div class="b" @contextmenu.prevent.stop="onContextmenub($event,2)"></div>
  	</div>
  </div>