VueFlow官网:https://vue-flow.nodejs.cn/guide/composables.html
安装的package.json:
"@vue-flow/background": "^1.2.0",
"@vue-flow/controls": "^1.1.0",
"@vue-flow/core": "^1.29.2",
"@vue-flow/minimap": "^1.5.3",
获取节点树json数据,并在节点树中修改或者添加data数据
import { useVueFlow } from '@vue-flow/core';
// 获取 VueFlow 实例
const { updateNode, getNodes } = useVueFlow();
// 弹窗
import { message } from 'ant-design-vue';
// 获取节点数据
const nodes = getNodes.value;
const node = nodes.find(n => n.id === props.nodeId);
console.log(JSON.stringify(node));
// 更新 VueFlow 节点数据
updateNode(props.nodeId, {
data: {
nodeName: staticActionData.value.nodeName,
fieldName: staticActionData.value.fieldName,
fieldValue: staticActionData.value.fieldValue,
// // 保留原有的其他数据
// ...staticActionData.value,
}
2025-09-08 start:
获取当前的节点,让节点不能被删除
const {
removeNodes,
removeEdges,
onNodesChange,
getSelectedNodes,
getSelectedEdges,
} = useVueFlow();
// 键盘事件处理函数
function handleKeyDown(event: KeyboardEvent) {
// 检查按下的键是否为退格键(Backspace)或删除键(Delete)
if (event.key === 'Backspace' || event.key === 'Delete') {
// 获取当前选中的节点和连线
const currentSelectedNodes = getSelectedNodes.value;
const currentSelectedEdges = getSelectedEdges.value;
// 阻止默认删除操作
event.preventDefault();
event.stopPropagation();
// 处理选中的连线删除
if (currentSelectedEdges.length > 0) {
const edgeIdsToDelete = currentSelectedEdges.map((edge) => edge.id);
removeEdges(edgeIdsToDelete);
}
// 处理选中的节点删除
if (currentSelectedNodes.length > 0) {
// 检查是否有开始节点或结束节点被选中
const hasStartOrEndNode = currentSelectedNodes.some(
(node) => node.type === 'start' || node.type === 'end',
);
if (hasStartOrEndNode) {
message.error('开始节点和结束节点无法删除');
return false;
}
// 只删除非开始节点和非结束节点
const nodesToDelete = currentSelectedNodes.filter(
(node) => node.type !== 'start' && node.type !== 'end',
);
if (nodesToDelete.length > 0) {
// 删除允许删除的节点
const nodeIdsToDelete = nodesToDelete.map((node) => node.id);
removeNodes(nodeIdsToDelete);
}
}
}
}
<VueFlow
:node-types="nodeTypes"
:nodes="nodes"
:edges="edges"
:delete-key-code="false" <!-- 禁用默认删除行为,这里不添加的话,还是会导致节点被删除 -->
@edges-change="handleEdgesChange"
>
// 组件挂载时添加键盘事件监听器
onMounted(() => {
window.addEventListener('keydown', handleKeyDown);
console.log('Vue Flow 初始化完成');
console.log('getSelectedNodes 类型:', typeof getSelectedNodes);
console.log('getSelectedNodes 值:', getSelectedNodes);
});
// 组件卸载时移除键盘事件监听器
onUnmounted(() => {
window.removeEventListener('keydown', handleKeyDown);
});
end