安装

// npm安装
npm i qtum-ui
// cnpm安装
cnpm i qtum-ui

依赖包

vue

cnpm/npm i element-ui
cnpm/npm i vuedraggable

引入

在main.js中引入qtum-ui

import QtumUi from "qtum-ui";
import "qtum-ui/lib/qtum-ui.css";
Vue.use(QtumUi);

组件

FlowChart（流程图）

可进行拖拽生成流程图

使用

<template>
    <qt-flow-chart :data="flowData" @changeFlow="changeFlow" ref="qtFormChart">
	    <!-- 需要拖拽的列表 -->
	    <ul slot-scope="scope">
          <li v-for="item in lists" :key="item.id">
              <draggable
              v-bind="scope.getDragOptions()"
              @end="scope.drag(item, $event)">
                  <div>{{item.name}}</div>
              </draggable>
          </li>
      </ul>
      
      <!-- 节点内容 -->
      <div slot="node" slot-scope="scope">{{scope.node.name}}</div>
    </qt-flow-chart>
</template>

// 需要npm/cnpm i vuedraggable
import draggable from "vuedraggable";
export default {
    data() {
	    return {
		    lists: [{
			    id: "01",
			    name: "测试"
		    },{
			    id: "02",
			    name: "测试2"
		    }],
		    flowData: {
			    nodes: [{
				    // 可拖拽的节点列表信息 -- lists里面的子项
				    id: "01",
				    name: "测试",
				    // 节点数据
				    sign: "oxtsnt", // 必须，唯一标志符
				    top: "10px", // 必须，节点距离顶部的偏移
				    left: "10px", // 必须， 节点距离左侧的偏移
			    }, {
				    id: "02",
				    name: "测试2",
				    sign: "osien",
				    top: "50px", 
				    left: "50px"
			    }],
			    lines: [{
				    from: "oxtsnt", // 源节点sign
				    to: "osien" // 目标节点sign
			    }]
		    }
	    }
    },
    methods: {
	    changeFlow(data) {
		    // 流程图拖拽删除等操作返回数据
	    },
        addNode() {
            // 添加节点
            this.$refs.qtFormChart.addNode({
                name: "节点名称",
                ... // 节点信息
            })
        }
    }
}

配置参数

插槽

默认插槽

// 父组件中使用
// slot-scope获取drag和getDragOptions
<ul slot-scope="scope">
    <li v-for="item in lists" :key="item.id">
        // scope.drag: 拖拽添加流程图节点
	    // scope.getDragOptions：拖拽默认配置样式（可自行配置 - 根据vuedraggable配置参数进行配置）
        <draggable
        v-bind="scope.getDragOptions()"
        @end="scope.drag($event, item)">
            <div>{{item.name}}</div>
        </draggable>
    </li>
</ul>
// cnpm/npm i vuedraggable
import draggable from "vuedraggable";
export default {
    components: { draggable }
}

节点插槽

//父组件中使用
<div slot="node" slot-scope="scope">{{scope.node}}</div>

方法

changeFlow

流程图节点或者连线等信息（增删改）改变

<FlowChart :data="flowData" @changeFlow="changeFlow"><FlowChart>

export default {
    methods: {
	    changeFlow(flowData) {}
    }
}

contextmenuNode

节点右键事件

<FlowChart :data="flowData" @contextmenuNode="contextmenuNode"><FlowChart>

export default {
    methods: {
	    contextmenuNode(node) {}
    }
}