转载https://blog.csdn.net/weixin_45682560/article/details/111036455
先下载
npm install @xunlei/vue-context-menu --save
<template>
<div id="dataPage">
<el-tree
id="el-tree"
:data="flowTree.root"
:props="flowTree.props"
@node-click="selectFlow"
@node-contextmenu="rightClick"
/>
<vue-context-menu
:target="contextMenuTarget"
:show="contextMenuVisible"
class="right-menu"
@update:show="(show) => (contextMenuVisible = show)"
>
<a href="javascript:;" @click="createDatabaseOrTable">新建</a>
<a href="javascript:;" @click="deleteDatabaseOrTable">删除</a>
<!-- <a href="javascript:;" @click="">上移</a>
<a href="javascript:;" @click="">下移</a> -->
</vue-context-menu>
<!--我添加的-开始 -->
<el-dialog
title="提示"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<span>这是一段信息</span>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false"
>确 定</el-button
>
</span>
</el-dialog>
<!--我添加的-结束-->
<el-button v-if="xinjian">新建</el-button>
</div>
</template>
<script>
import { component as VueContextMenu } from '@xunlei/vue-context-menu'
export default {
components: {
'vue-context-menu': VueContextMenu
},
data() {
return {
xinjian: false,
dialogVisible: false,
flowTree: {
root: [
{
id: '11',
label: '一级 1',
children: [
{
id: '22',
label: '二级 1-1',
children: [
{
label: '三级 1-1-1'
}
]
}
]
},
{
label: '一级 2',
children: [
{
label: '二级 2-1',
children: [
{
label: '三级 2-1-1'
}
]
},
{
label: '二级 2-2',
children: [
{
label: '三级 2-2-1'
}
]
}
]
},
{
label: '一级 3',
children: [
{
label: '二级 3-1',
children: [
{
label: '三级 3-1-1'
}
]
},
{
label: '二级 3-2',
children: [
{
label: '三级 3-2-1'
}
]
}
]
}
],
props: {
// label: 'name',
// children: 'children'
}
},
treeNodeData: '', // 存当前数据
treeNode: '', // 存当前节点信息
contextMenuVisible: false, // 让菜单显示
contextMenuTarget: null
}
},
methods: {
handleClose(done) { // 我添加的
this.$confirm('确认关闭?')
.then((_) => {
done()
})
.catch((_) => {})
},
selectFlow(a, b, c) {
this.xinjian = true
console.log('a', a)
console.log('b', b)
console.log('c', c)
}, // 我添加的,不添加控制台会报错
rightClick(e, data, node) {
this.treeNodeData = data // 存当前数据
this.treeNode = node // 存当前节点信息
console.log('rightClick', this.treeNodeData, this.treeNode)
this.contextMenuVisible = true // 让菜单显示
console.log('0', e, '1', e.screenX, '2', e.screenY)
const ele = document.querySelector('.right-menu')
ele.style.position = 'fixed'
ele.style.top = `${e.clientY}px`
ele.style.left = `${e.clientX + 10}px` // 根据鼠标点击位置设置菜单出现
},
createDatabaseOrTable() {
this.contextMenuVisible = false
console.log('createDatabaseOrTable', this.treeNodeData, this.treeNode)
this.dialogVisible = true // 我添加的 -打开弹窗
},
deleteDatabaseOrTable() {
this.contextMenuVisible = false
console.log('deleteDatabaseOrTable', this.treeNodeData, this.treeNode)
}
}
}
</script>
<style lang="scss" scoped>
// 下行代码会影响-弹窗样式,我关闭了
// #dataPage {
// margin: 0 0;
// text-align: center;
// color: #2c3e50;
// height: 100%;
// }
// 右键会选中文字,为了美观将它禁用
#el-tree {
user-select: none;
}
.right-menu {
font-size: 14px;
position: fixed;
background: #fff;
border: solid 1px rgba(0, 0, 0, 0.2);
border-radius: 3px;
z-index: 999;
display: none;
}
.right-menu a {
width: 150px;
height: 28px;
line-height: 28px;
text-align: center;
display: block;
color: #1a1a1a;
padding: 2px;
}
.right-menu a:hover {
background: #bbb;
color: #fff;
}
.right-menu {
border: 1px solid #eee;
box-shadow: 0 0.5em 1em 0 rgba(0, 0, 0, 0.1);
border-radius: 1px;
}
a {
text-decoration: none;
}
</style>