1.1插件功能

提供了一个可视化的流程设计器，你可以在设计器中拖拽组件，连接组件，设置组件属性。

提供了多种节点类型可共筛选。

提供了节点的相关操作，比如添加、删除、复制、粘贴、撤销节点。

提供了连线的相关操作，比如删除、撤销连线。

提供了导出流程图片、清空流程、预览模式等相关功能。

提供了相关的事件回调，你可以在事件回调中处理流程相关的逻辑。

提供了相关的属性，你可以在属性中设置组件的相关属性。

提供了相关的方法，你可以在方法中调用相关的功能。

二、快速开始

2.1：安装方式

npm i vue-dawn-flow

或者

 

yarn add vue-dawn-flow

2.2：全局注册

在 main.js 或 main.ts 中全局注册 vue-dawn-flow 插件

 

import { createApp } from 'vue'; 

import App from './App.vue' ;

import "../node_modules/vue-dawn-flow/dawn-flow.css"; 

import dawnFlow from "vue-dawn-flow" 

 

const app = createApp(App);

app.use(dawnFlow)

app.mount('#app')

2.3：页面使用

在需要使用的 vue 页面，添加如下代码

 

<template>

  <dawnFlow></dawnFlow>

</template>

2.4：示例图

vue-dawn-flow

 

vue-dawn-flow2

 

vue-dawn-flow3

 

vue-dawn-flow4

 

三、属性

3.1：节点栏

属性名称：NodeBar

作用：控制节点栏是否显示、右边节点属性栏是否显示

类型：Boolean

默认值：true

示例

 

<template>

  <dawnFlow :NodeBar="true"></dawnFlow>

</template>

3.2：工具栏

属性名称：ToolBar

作用：控制是否显示

类型：Boolean

默认值：true

示例

 

<template>

  <dawnFlow :ToolBar="true"></dawnFlow>

</template>

3.3：模式切换

属性名称：isPreview

作用：是否预览模式

类型：Boolean

默认值：false

示例

 

<template>

  <dawnFlow :isPreview="true"></dawnFlow>

</template>

四、方法

4.1：导出流程图片

方法名称：downloadImageClick

作用：下载图片

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="downloadImage">下载图片</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const downloadImage = () => {

  dawnFlowRef.value.downloadImageClick();

};

</script>

4.2：获取流程数据

方法名称：getFlowJson

作用：获取流程数据，可用于获取当前流程图的 JSON 数据

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="getFlowData">获取流程数据</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const getFlowData = () => {

  dawnFlowRef.value.getFlowJson();

};

</script>

4.3：设置流程数据

方法名称：setFlowJson

作用：设置流程数据，可用于初始化流程图

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="setFlowData">设置流程数据</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const setFlowData = () => {

  dawnFlowRef.value.setFlowJson();

};

</script>

4.4：删除流程

方法名称：delFlowClick

作用：删除当前流程图，清空当前流程图数据

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="delFlowData">删除流程</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const delFlowData = () => {

  dawnFlowRef.value.delFlowClick();

};

</script>

4.5：删除选中节点

方法名称：delSelectNodeClick

作用：删除当前选中节点，按住 ctrl 可以多选节点

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="delSelectNodeData">删除选中节点</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const delSelectNodeData = () => {

  dawnFlowRef.value.delSelectNodeClick();

};

</script>

4.6：删除选中连线

方法名称：delSelectEdgesClick

作用：删除当前选中连线，按住 ctrl 可以多选连线

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="delSelectEdgesData">删除选中连线</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const delSelectEdgesData = () => {

  dawnFlowRef.value.delSelectEdgesClick();

};

</script>

4.7：返回画布中心位置

方法名称：backCenterClick

作用：返回画布中心位置

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="backCenter">返回画布中心位置</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const backCenter = () => {

  dawnFlowRef.value.backCenterClick();

};

</script>

4.8：撤销上一步操作

方法名称：revokeClick

作用：撤销上一步操作

类型：Function

默认值：() => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="revoke">撤销上一步操作</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const revoke = () => {

  dawnFlowRef.value.revokeClick();

};

</script>

4.9：模式切换

方法名称：setPreviewState

作用：切换模式，可切换为编辑模式和预览模式

类型：Function

默认值：(boolean) => {}

示例

 

<template>

  <dawnFlow ref="dawnFlowRef"></dawnFlow>

  <button @click="switchPreviewState">切换模式</button>

</template>

<script lang="ts" setup>

import { ref } from "vue";

 

const dawnFlowRef = ref(null);

 

const switchPreviewState = (isPreview) => {

  dawnFlowRef.value.setPreviewState(isPreview);

};

</script>