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