+
@@ -7,7 +7,7 @@
+ @node-expand="treeNodeClick" @node-contextmenu="nodeContextmenu">
@@ -19,16 +19,13 @@
{{ data.label }}
-
-
-
-
-
+
@@ -36,6 +33,7 @@
import { onMounted, reactive, ref, watch, toRefs } from 'vue';
import { TagTreeNode } from './tag';
import TagInfo from './TagInfo.vue';
+import Contextmenu from '@/components/contextmenu/index.vue';
const props = defineProps({
height: {
@@ -45,6 +43,10 @@ const props = defineProps({
load: {
type: Function,
required: true,
+ },
+ loadContextmenuItems: {
+ type: Function,
+ required: false,
}
})
@@ -54,12 +56,18 @@ const treeProps = {
isLeaf: 'isLeaf',
}
-const emit = defineEmits(['nodeClick'])
+const emit = defineEmits(['nodeClick', 'currentContextmenuClick'])
const treeRef: any = ref(null)
+const contextmenuRef = ref();
const state = reactive({
height: 600 as any,
filterText: '',
+ dropdown: {
+ x: 0,
+ y: 0,
+ },
+ contextmenuItems: [],
opend: {},
})
const { filterText } = toRefs(state)
@@ -101,6 +109,29 @@ const loadNode = async (node: any, resolve: any) => {
const treeNodeClick = (data: any) => {
emit('nodeClick', data);
+ // 关闭可能存在的右击菜单
+ contextmenuRef.value.closeContextmenu();
+}
+
+// 树节点右击事件
+const nodeContextmenu = (event: any, data: any) => {
+ if (!props.loadContextmenuItems) {
+ return;
+ }
+ // 加载当前节点是否需要显示右击菜单
+ const items = props.loadContextmenuItems(data)
+ if (!items || items.length == 0) {
+ return;
+ }
+ state.contextmenuItems = items;
+ const { clientX, clientY } = event;
+ state.dropdown.x = clientX;
+ state.dropdown.y = clientY;
+ contextmenuRef.value.openContextmenu(data);
+}
+
+const onCurrentContextmenuClick = (clickData: any) => {
+ emit('currentContextmenuClick', clickData);
}
const reloadNode = (nodeKey: any) => {
@@ -125,6 +156,7 @@ defineExpose({