canvas-flows

A canvas flows project

项目演示

演示地址

安装

npm install canvas-flows -S

使用

//ES6
import canvasFlows from 'canvas-flows'
Vue.use(canvasFlows)

// require
var canvasFlows = require('canvasFlows')


// 或者直接使用script导入
<script src="https://unpkg.com/canvas-flows/dist/canvas-flows.js"></script>

<flows v-model="config"></flows>

<script>
export default {
  data () {
    return {
      config: {
        nodes: [
          { id: -1, name: "NEW 1" },
          { id: -2, name: "NEW 2" },
          { id: -3, name: "NEW 3" },
          { id: -4, name: "NEW 4" },
          { id: -5, name: "NEW 5" },
          { id: -6, name: "NEW 6" },
          { id: -7, name: "NEW 7" }
        ],
        sequenceFlows: [
          { sourceRef: 3, targetRef: -1 },
          { sourceRef: -1, targetRef: -2 },
          { sourceRef: -1, targetRef: -3 },
          { sourceRef: -1, targetRef: -4 },
          { sourceRef: -1, targetRef: -6 },
          { sourceRef: -2, targetRef: -5 },
          { sourceRef: -3, targetRef: -5 },
          { sourceRef: -4, targetRef: -5 },
          { sourceRef: -6, targetRef: -5 }
        ]
      }
    }
  }
}
</script>

Props

| name | Description | type |default| | ----------------- | ---------------- | :--------: | :----------: | | value | 数据 |Object| {} | nodeWidth | 节点默认宽度 |Number | 100 | nodeHeight | 节点默高度 |Number | 30 | offsetX | 节点间横向间隔 |Number | 12 | offsetY | 节点间纵向间隔 |Number | 80 | useInputaEdit | 是否启用编辑框 |Boolean | true | fristNodeOnly | 首节点唯一，即首节点不可被连接或删除 |Boolean | true | readonly | 展示模式(不可编辑) |Boolean | false | finishNodes | 已完成节点(展示模式可用) |Array | []

Methods

| 事件名 | 说明 | 参数 | |--------|------ |------ | |add |不传参数默认添加到顶级节点，传入id则从此id处向下添加节点 | id | |next |从id处向下添加子节点 |id | |deleteDot|删除点 |id | |deleteLine|删除线 |id |

Events

| 事件名 | 说明 | 回调参数 | |--------|------ |------ | |check |单击节点时触发 |-- 节点ID | |link |连接节点时触发 |-- {form: name, to: name} | |edit |双击节点时触发 | 节点对象 | |delete|删除节点时触发 | 节点ID |