vue3中 approval-flow用法
时间: 2024-06-11 12:09:42 浏览: 149
Approval-flow是一个审批流程组件库,提供了审批流程的模板和基础组件,可以帮助开发者快速构建审批流程相关的页面。
在Vue3中使用Approval-flow,需要先安装approval-flow组件库:
```
npm install approval-flow --save
```
在组件中引入Approval-flow组件:
```
<template>
<div>
<af-process :process="process" :options="options" @on-node-click="onNodeClick"></af-process>
</div>
</template>
<script>
import { ref } from 'vue';
import { AfProcess } from 'approval-flow';
export default {
components: {
AfProcess,
},
setup() {
const process = ref({
nodes: [
{
id: 'node1',
name: '节点1',
type: 'start',
x: 100,
y: 100,
},
{
id: 'node2',
name: '节点2',
type: 'task',
x: 300,
y: 100,
},
{
id: 'node3',
name: '节点3',
type: 'task',
x: 500,
y: 100,
},
{
id: 'node4',
name: '节点4',
type: 'end',
x: 700,
y: 100,
},
],
edges: [
{
source: 'node1',
target: 'node2',
},
{
source: 'node2',
target: 'node3',
},
{
source: 'node3',
target: 'node4',
},
],
});
const options = ref({
editable: false,
});
function onNodeClick(node) {
console.log(node);
}
return {
process,
options,
onNodeClick,
};
},
};
</script>
```
在以上代码中,我们首先引入AfProcess组件,然后在setup函数中定义了一个process变量,表示审批流程的节点和边,options变量表示审批流程的显示选项,onNodeClick函数表示节点点击事件的处理函数。
在模板中,我们使用AfProcess组件,将process和options传递给AfProcess组件,同时监听节点点击事件。
AfProcess组件会根据传递的process和options渲染出审批流程图,用户可以在图中进行节点的拖拽和连线操作。同时,AfProcess组件也会触发节点点击事件,在事件处理函数中可以获取到当前点击的节点信息。