{"id":17176217,"url":"https://github.com/wanglin2/simple-flow-chart","last_synced_at":"2025-04-11T01:03:23.723Z","repository":{"id":65141849,"uuid":"569953011","full_name":"wanglin2/simple-flow-chart","owner":"wanglin2","description":"一个简单的流程图设计器，基于Vue2。","archived":false,"fork":false,"pushed_at":"2024-09-05T08:47:02.000Z","size":1103,"stargazers_count":57,"open_issues_count":2,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-11T01:03:12.902Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://wanglin2.github.io/simple-flow-chart/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wanglin2.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-24T02:02:26.000Z","updated_at":"2025-02-20T09:01:59.000Z","dependencies_parsed_at":"2024-12-02T19:16:04.759Z","dependency_job_id":null,"html_url":"https://github.com/wanglin2/simple-flow-chart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-flow-chart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-flow-chart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-flow-chart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wanglin2%2Fsimple-flow-chart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wanglin2","download_url":"https://codeload.github.com/wanglin2/simple-flow-chart/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248322597,"owners_count":21084336,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T23:59:35.114Z","updated_at":"2025-04-11T01:03:23.699Z","avatar_url":"https://github.com/wanglin2.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 一个基于Vue2的极简流程设计组件\n\n\u003e 如果需要在`React`项目中使用，可以移步`kne-union`实现的`react`版本：\n\u003e \n\u003e 项目地址：https://github.com/kne-union/react-flow-chart\n\u003e\n\u003e 在线文档和示例：https://www.kne-union.top/#/libs/ReactFlowChart\n\n## 安装\n\n```bash\nnpm i @wanglin1994/simple-flow-chart\n```\n\n## 引入\n\n```js\nimport SimpleFlowChart from '@wanglin1994/simple-flow-chart'\n\n\nVue.use(SimpleFlowChart, {\n  notRegisterNodeContent: false, // 如果需要自己编写节点内容组件，设为true\n  notRegisterNodeTypeContent: false // 如果需要自己编写添加节点的悬浮面板组件，设为true\n})\n```\n\n\n\n## 使用\n\n```html\n\u003cdiv class=\"flowChartContainer\"\u003e\n    \u003cSimpleFlowChart v-model=\"data\"\u003e\u003c/SimpleFlowChart\u003e\n\u003c/div\u003e\n```\n\n提供一个宽高固定的容器，双向绑定的数据`data`可以回传完整数据，或者初始传一个空数组即可。\n\n\n\n# 详细文档\n\n### 数据\n\n```html\n\u003cSimpleFlowChart v-model=\"data\"\u003e\u003c/SimpleFlowChart\u003e\n```\n\n`data`数据结构示例如下：\n\n```js\n[\n  { id: 'startEvent', type: 'start', title: '开始' },\n  {\n    id: '随机id',\n    type: 'normal',\n    title: '申请人',\n    content: '员工',\n    configData: {},\n    nodeList: []\n  },\n  {\n    id: '随机id',\n    type: 'condition',\n    title: '条件分支',\n    children: [\n      {\n        id: '随机id',\n        title: '通过',\n        content: '理由充分',\n        type: 'normal',\n        configData: {},\n        nodeList: [\n          {\n            id: '随机id',\n            type: 'normal',\n            title: '审批人',\n            content: '上级主管',\n            configData: {},\n            nodeList: []\n      },\n      {\n        id: '随机id',\n        type: 'normal',\n        title: '指派',\n        content: 'HR',\n        configData: {},\n        nodeList: []\n      }\n    ]\n  },\n  { id: 'endEvent', type: 'end', title: '结束' }\n]\n```\n\n`title`字段为节点标题，会显示在节点上，`content`为节点内容，也会显示在节点上，如果有不需要显示的自定义数据都可以保存在`configData`里。\n\n`id`默认会使用`uuid`随机生成，也可以自定义生成。\n\n\n\n## 属性\n\n```html\n\u003cSimpleFlowChart v-model=\"data\"\u003e\u003c/SimpleFlowChart\u003e\n```\n\n`SimpleFlowChart`组件还支持以下属性：\n\n### initFit\n\n\u003e v0.0.4+\n\n类型：`Boolean`，默认为`false`\n\n是否在第一次渲染时将流程图自动缩放至全部显示。\n\n如果你想在容器大小改变后自动缩放，那么需要手动调用组件实例的`fit()`方法。\n\n### showScrollBar\n\n\u003e v0.0.4+\n\n类型：`Boolean`，默认为`true`\n\n是否显示滚动条。\n\n### enableDrag\n\n\u003e v0.0.3+\n\n类型：`Boolean`，默认为`true`\n\n是否必传：否\n\n是否开启按住画布拖拽功能。\n\n### customCreateNode\n\n类型：`Function`\n\n是否必传：否\n\n回调参数：`nodeList`（当前被点击添加新节点的节点所在节点列表）, `nodeData`（当前被点击添加新节点的节点）, `type`（悬浮面板里点击要添加的节点类型数据）\n\n自定义创建新节点，当点击添加节点的时候会调用该函数，需要返回一个要添加的新节点的数据结构。\n\n\n\n### customCreateConditionBranchNode\n\n类型：`Function`\n\n是否必传：否 \n\n回调参数：`nodeData`\n\n自定义创建新的分支节点。需要返回一个要添加的新节点的数据结构。\n\n\n\n### beforeDeleteNode\n\n类型：`Function`\n\n是否必传：否\n\n回调参数：`nodeList`, `childrenList`, `belongConditionNodeData`, `nodeData`\n\n删除节点前的回调函数，需要返回一个`Promise`，如果结果是`resolve` ，那么会执行删除，否则什么也不做。如果需要进行删除前的二次确认那么这个函数是你需要的。\n\n\n\n### background\n\n类型：`String`\n\n是否必传：否\n\n默认值：`rgba(0, 0, 0, 0.03)`\n\n画布背景颜色。\n\n\n\n### readonly\n\n类型：`Boolean`\n\n是否必传：否\n\n默认值：`false`\n\n是否只读。\n\n\n\n### nodeTypeList\n\n类型：`Array`\n\n是否必传：否\n\n默认可以添加的节点列表数据如下：\n\n```js\n[\n  {\n    name: '普通节点',\n    list: [\n      {\n        type: 'normal',\n        name: '普通节点'\n      }\n    ]\n  },\n  {\n    name: '分支节点',\n    list: [\n      {\n        type: 'condition',\n        name: '条件分支'\n      }\n    ]\n  }\n]\n```\n\n你可以通过该属性自定义可添加的节点类型列表。\n\n\n\n### vertical\n\n类型：`Boolean`\n\n是否必传：否\n\n是否垂直显示。\n\n\n\n### showScaleBar\n\n类型：`Boolean`\n\n是否必传：否\n\n是否显示右上角的放大缩小控件。\n\n\n\n### customCreateNodeId\n\n类型：`Function`\n\n是否必传：否\n\n自定义创建节点的唯一的`id`。\n\n## 方法\n\n### fit()\n\n\u003e v0.0.4+\n\n将流程图缩放至全部显示。\n\n## 事件\n\n`SimpleFlowChart`组件上可以监听如下事件：\n\n\n\n### add-node\n\n数据：`newNode`\n\n添加完新节点后触发。\n\n\n\n### delete-node\n\n数据：`nodeData`\n\n删除一个节点后触发。\n\n\n\n### add-condition-branch\n\n数据：`newNode`\n\n添加完新的分支节点后触发。\n\n\n\n### node-content-click\n\n数据：`nodeData`、`nodeList`\n\n一个节点被点击时触发，一般用于配置某个节点数据时使用。\n\n\n\n## 自定义节点\n\n如果想自定义节点的样式，首先需要在注册组件时传入如下选项：\n\n```js\nVue.use(SimpleFlowChart, {\n  notRegisterNodeContent: true, // 如果需要自己编写节点内容组件，设为true\n})\n```\n\n然后你就可以自己编写一个节点内容的组件了，组件的名称，也就是`name`必须为`SFCNodeContent`，然后再使用前先全局注册即可。\n\n组件的数据可以通过名为`data`的`props`来接收。\n\n\n\n## 自定义节点添加悬浮面板\n\n如果想自定义添加节点类型的悬浮选择面板，首先需要在注册组件时传入如下选项：\n\n```js\nVue.use(SimpleFlowChart, {\n  notRegisterNodeContent: true, \n})\n```\n\n然后你就可以自己编写一个组件了，组件的名称，也就是`name`必须为`SFCNodeTypeContent`，然后再使用前先全局注册即可。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanglin2%2Fsimple-flow-chart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwanglin2%2Fsimple-flow-chart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwanglin2%2Fsimple-flow-chart/lists"}