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

MenuItem