代码拉取完成,页面将自动刷新
同步操作将从 smallwei/avue-doc 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
常用的流程组件
:::tip 2.0.4 ::::
<!-- 导入需要的包 (一定要放到index.html中的head标签里-->
<script src="https://cdn.staticfile.org/jsPlumb/2.11.1/js/jsplumb.min.js"></script>
:::demo 点击线条即可删除线条
<el-button type="primary" @click="$refs.flow.addNode('测试节点')">添加节点</el-button>
<el-button type="primary" @click="handleNext">下一个节点</el-button>
<br /><br />
<avue-flow :height="600" :width="1200" ref="flow" :option="option" v-model="form">
<template slot-scope="scope" slot="header">
<i class="el-icon-delete" @click="$refs.flow.deleteNode(scope.node.id)"></i>
自定义头部
</template>
<div slot-scope="{node}">
<span>自定义{{(node || {}).name}}</span>
</div>
</avue-flow>
<script>
export default {
data() {
return {
count: 0,
form: '',
option: {
"name": "流程A",
"nodeList": [
{
"id": "nodeA",
"name": "流程A-节点A",
"left": 39,
"top": 110,
},
{
"id": "nodeB",
"name": "流程A-节点B",
"left": 340,
"top": 161,
},
{
"id": "nodeC",
"name": "流程A-节点C",
"left": 739,
"top": 161,
},
{
"id": "nodeD",
"name": "节点D",
"left": 739,
"top": 20,
}
],
"lineList": [
{
"from": "nodeA",
"to": "nodeB"
},
{
"from": "nodeB",
"to": "nodeC"
},
{
"from": "nodeC",
"to": "nodeD"
}
]
}
}
},
computed: {
nodeList() {
return this.option.nodeList
}
},
mounted() {
this.form = this.nodeList[this.count].id;
},
methods: {
handleClick(node) {
this.$message.success(JSON.stringify(node))
},
handleNext() {
this.count++
if (this.count >= this.nodeList.length) {
this.count = 0;
}
this.form = this.nodeList[this.count].id;
}
}
}
</script>
:::
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
width | 画布宽度 | Number | - | - |
height | 画布高度 | Number | - | - |
option | 属性配置 | Object | - | - |
事件名 | 说明 | 参数 |
---|---|---|
click | 节点点击事件 | node |
方法名 | 说明 | 参数 |
---|---|---|
nodeAdd | 节点新增 | name |
deleteNode | 节点删除 | id |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。