vue-contextmenujs 实现鼠标右键弹出菜单列表

1. 效果
   
2. 安装

npm install vue-contextmenujs || yarn add vue-contextmenujs

3. 使用

// main.js
import Contextmenu from 'vue-contextmenujs'
Vue.use(Contextmenu)

4. 示例

<template>
 <el-table
    :data="tableData"
     border
     highlight-current-row
     height="100%"
     size="mini"
     @row-contextmenu="onContextmenu"
/>
</template>
<script>
export default{
	methods:{
	   onContextmenu(row, column, event) {
	      event.preventDefault()
	      this.$contextmenu({
	        items: [
	          {
	            label: '患者病历夹',
	            divided: true,
	            minWidth: 0,
	            onClick: () => {
	              this.patientStateVisible = true
	            }
	          },
	
	          {
	            label: '麻醉文书',
	            onClick: () => {
	              this.docDialogVisible = true
	            }
	          },
	          {
	            label: '临床麻醉',
	            disabled: row.drug_state !== 2 ? true : false,
	            onClick: () => {
	              this.handleStartMz(row)
	            }
	          },
	          {
	            label: '麻醉复苏',
	            disabled: row.fs_state !== 2 ? true : false,
	            onClick: () => {
	              this.handleStartFs(row)
	            }
	          }
	        ],
	        event,
	        customClass: 'mzss-cx', // 自定义菜单 class
	        zIndex: 3, // 菜单样式 z-index
	        minWidth: 160 // 主菜单最小宽度
	      })
	      return false
	    },
	}
}
</script>

5. 参数说明
   Menu

属性	描述	类型	默认值
items	菜单结构信息	MenuItem[]	–
event	鼠标事件信息	Event	–
x	菜单显示X坐标, 存在event则失效	number	0
y	菜单显示Y坐标, 存在event则失效	number	0
zIndex	菜单样式z-index	number	2
customClass	自定义class	string	–
minWidth	主菜单最小宽度	number	150

MenuItem

属性	描述	类型	默认值
label	菜单名称	string	–
icon	菜单项图标, 生成元素	string	–
disabled	是否禁用菜单项	boolean	false
divided	是否显示分割线	boolean	false
customClass	自定义子菜单class	string	–
minWidth	子菜单最小宽度	number	150
onClick	菜单项点击事件	Function()	–
children	子菜单结构信息	MenuItem[]	–