vue-flow的相关使用

我爱海鲸 2025-09-08 11:00:26 暂无标签

简介流程引擎、编排节点、获取节点、在节点中添加数据、data、获取当前的节点

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

你好:我的2025