精美的vue流程设计器
<h1 id="一vue-dawn-flow介绍">一、vue-dawn-flow介绍</h1><p>vue-dawn-flow是一款功能强大的开源流程设计器，专为 Vue.js 生态打造，完美兼容 Vue 2 和 Vue 3 框架。并且能很好的兼容vue前端所有框架。</p>
<h2 id="11插件功能">1.1插件功能</h2>
<ul>
<li>提供了一个可视化的流程设计器，你可以在设计器中拖拽组件，连接组件，设置组件属性。</li>
<li>提供了多种节点类型可共筛选。</li>
<li>提供了节点的相关操作，比如添加、删除、复制、粘贴、撤销节点。</li>
<li>提供了连线的相关操作，比如删除、撤销连线。</li>
<li>提供了导出流程图片、清空流程、预览模式等相关功能。</li>
<li>提供了相关的事件回调，你可以在事件回调中处理流程相关的逻辑。</li>
<li>提供了相关的属性，你可以在属性中设置组件的相关属性。</li>
<li>提供了相关的方法，你可以在方法中调用相关的功能。</li>
</ul>
<h1 id="二快速开始">二、快速开始</h1>
<h2 id="21安装方式">2.1：安装方式</h2>
<pre><code class="language-bash">npm i vue-dawn-flow
</code></pre>
<p>或者</p>
<pre><code class="language-bash">yarn add vue-dawn-flow
</code></pre>
<h2 id="22全局注册">2.2：全局注册</h2>
<p>在 main.js 或 main.ts 中全局注册 vue-dawn-flow 插件</p>
<pre><code class="language-ts">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')
</code></pre>
<h2 id="23页面使用">2.3：页面使用</h2>
<p>在需要使用的 vue 页面，添加如下代码</p>
<pre><code class="language-ts"><template>
<dawnFlow></dawnFlow>
</template>
</code></pre>
<h2 id="24示例图">2.4：示例图</h2>
<p><img src="https://img2024.cnblogs.com/blog/1158526/202511/1158526-20251105160605191-299794716.png"></p>
<h1 id="三属性">三、属性</h1>
<h2 id="31节点栏">3.1：节点栏</h2>
<ul>
<li>属性名称：NodeBar</li>
<li>作用：控制节点栏是否显示、右边节点属性栏是否显示</li>
<li>类型：Boolean</li>
<li>默认值：true</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-vue"><template>
<dawnFlow :NodeBar="true"></dawnFlow>
</template>
</code></pre>
<h2 id="32工具栏">3.2：工具栏</h2>
<ul>
<li>属性名称：ToolBar</li>
<li>作用：控制是否显示</li>
<li>类型：Boolean</li>
<li>默认值：true</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><template>
<dawnFlow :ToolBar="true"></dawnFlow>
</template>
</code></pre>
<h2 id="33模式切换">3.3：模式切换</h2>
<ul>
<li>属性名称：isPreview</li>
<li>作用：是否预览模式</li>
<li>类型：Boolean</li>
<li>默认值：false</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><template>
<dawnFlow :isPreview="true"></dawnFlow>
</template>
</code></pre>
<h1 id="四方法">四、方法</h1>
<h2 id="41导出流程图片">4.1：导出流程图片</h2>
<ul>
<li>方法名称：downloadImageClick</li>
<li>作用：下载图片</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="42获取流程数据">4.2：获取流程数据</h2>
<ul>
<li>方法名称：getFlowJson</li>
<li>作用：获取流程数据，可用于获取当前流程图的 JSON 数据</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="43设置流程数据">4.3：设置流程数据</h2>
<ul>
<li>方法名称：setFlowJson</li>
<li>作用：设置流程数据，可用于初始化流程图</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="44删除流程">4.4：删除流程</h2>
<ul>
<li>方法名称：delFlowClick</li>
<li>作用：删除当前流程图，清空当前流程图数据</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="45删除选中节点">4.5：删除选中节点</h2>
<ul>
<li>方法名称：delSelectNodeClick</li>
<li>作用：删除当前选中节点，按住 ctrl 可以多选节点</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="46删除选中连线">4.6：删除选中连线</h2>
<ul>
<li>方法名称：delSelectEdgesClick</li>
<li>作用：删除当前选中连线，按住 ctrl 可以多选连线</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="47返回画布中心位置">4.7：返回画布中心位置</h2>
<ul>
<li>方法名称：backCenterClick</li>
<li>作用：返回画布中心位置</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="48撤销上一步操作">4.8：撤销上一步操作</h2>
<ul>
<li>方法名称：revokeClick</li>
<li>作用：撤销上一步操作</li>
<li>类型：Function</li>
<li>默认值：() => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h2 id="49模式切换">4.9：模式切换</h2>
<ul>
<li>方法名称：setPreviewState</li>
<li>作用：切换模式，可切换为编辑模式和预览模式</li>
<li>类型：Function</li>
<li>默认值：(boolean) => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><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>
</code></pre>
<h1 id="五事件">五、事件</h1>
<h2 id="51节点双击事件">5.1：节点双击事件</h2>
<ul>
<li>事件名称：currentNodeDoubleClick</li>
<li>作用：节点双击事件，可用于在节点双击时触发自定义操作</li>
<li>类型：Function(nodeData:[])</li>
<li>默认值：(nodeData:[]) => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><template>
<dawnFlow @currentNodeDoubleClick="currentNodeClick"></dawnFlow>
</template>
<script lang="ts" setup>
const currentNodeClick = (nodeData) => {
//打印节点数据
console.log(nodeData);
};
</script>
</code></pre>
<h2 id="52连线双击事件">5.2：连线双击事件</h2>
<ul>
<li>事件名称：currentEdgeDoubleClick</li>
<li>作用：连线双击事件，可用于在连线双击时触发自定义操作</li>
<li>类型：Function(edgeData:[])</li>
<li>默认值：(edgeData:[]) => {}</li>
</ul>
<p><strong>示例</strong></p>
<pre><code class="language-ts"><template>
<dawnFlow @currentEdgeDoubleClick="currentEdgeClick"></dawnFlow>
</template>
<script lang="ts" setup>
const currentEdgeClick = (edgeData) => {
//打印连线数据
console.log(edgeData);
};
</script>
</code></pre>
<h1 id="六定制开发">六、定制开发</h1>
<blockquote>
<p>如果当前插件不能满足你的需求，你可以定制开发，进行定制开发。<br>
作者 qq:1652794307。<br>
作者微信：cf_bzsmn。<br>
定制开发的费用根据项目的复杂程度和功能的数量而不同。</p>
</blockquote>
<h1 id="七源码出售">七、源码出售</h1>
<blockquote>
<p>源码出售仅需￥ 998 元。<br>
作者 qq:1652794307。<br>
作者微信：cf_bzsmn。</p>
</blockquote>
<h1 id="八讨论群">八、讨论群</h1>
<blockquote>
<p>作者会在群里回答你的问题，也会分享插件的使用经验。<br>
qq 群号：801913255。</p>
</blockquote>
<h1 id="九文档地址">九、文档地址</h1>
<p>文档地址：http://139.155.137.144:8871</p>
<p>在线演示：http://139.155.137.144:8870</p>
<p>注：文档中有插件的使用说明</p>
<h1 id="十下载示例">十、下载示例</h1>
<p>https://gitee.com/yangguangchenjie/vue-dawn-flow</p>
<p>有兴趣的朋友，请关注我微信公众号吧(<em><sup>▽</sup></em>)。</p>
<p><img src="https://img2024.cnblogs.com/blog/1158526/202511/1158526-20251108143253166-199015150.png"></p>
<p>关注我：一个全栈多端的宝藏博主，定时分享技术文章，不定时分享开源项目。关注我，带你认识不一样的程序世界</p><br><br>
来源：https://www.cnblogs.com/cyzf/p/19201769
頁:
[1]