株洲在线网站的目标客户,台州建设局网站建筑工程黑名单,不是营销型的网站,珠海网站制作公司先来看看实现效果#xff1a; 【组件库】使用 AntV X6 ElementUI 实现拖拽配置自定义 Vue 节点 在现代前端开发中#xff0c;流程图和可视化编辑器的需求日益增加。AntV X6 是一个强大的图形化框架#xff0c;支持丰富的图形操作和自定义功能。结合 ElementUI#xff0c;… 先来看看实现效果 【组件库】使用 AntV X6 ElementUI 实现拖拽配置自定义 Vue 节点 在现代前端开发中流程图和可视化编辑器的需求日益增加。AntV X6 是一个强大的图形化框架支持丰富的图形操作和自定义功能。结合 ElementUI我们可以轻松实现一个基于 Vue 的拖拽配置流程图支持自定义节点和动态字段编辑。
一、技术栈介绍
AntV X6一个基于 HTML5 Canvas 的图形化框架支持流程图、拓扑图等多种图形化场景。
ElementUI一个基于 Vue 的 UI 组件库提供丰富的表单、表格和弹窗组件。Vue.js一个渐进式 JavaScript 框架用于构建用户界面。
二、项目需求
我们的目标是实现一个流程图编辑器支持以下功能 拖拽添加节点用户可以通过拖拽的方式在画布上添加自定义节点。 节点配置通过弹窗对话框配置节点的属性包括实体名称和字段信息。 字段动态编辑支持动态添加、删除字段并提供字段类型选择。 数据导入导出支持从 JSON 文件导入数据以及将当前流程图导出为 JSON 文件。
三、实现步骤
1. 初始化项目
首先确保你已经安装了 Vue CLI 和相关依赖。创建一个新的 Vue 项目并安装以下依赖
vue create x6-vue-flow
cd x6-vue-flow
npm install antv/x6 antv/x6-plugin-dnd antv/x6-vue-shape element-ui2. 创建主组件
在 src/components/FlowEditor.vue 中实现流程图编辑器的主组件。以下是核心代码
templatediv classflow-container!-- 导航栏 --div classflow-navdiv classadd-entity mousedownstartDrag添加实体/divel-button typeprimary plain sizemedium保存/el-buttonel-button typewarning plain sizemedium清空/el-buttonel-button typesuccess plain sizemedium导出/el-buttonel-upload accept.json :on-progresshandleOnProgress action :show-file-listfalseel-button plain sizeprimary导入/el-button/el-upload/div!-- 画布 --div classflow-contentdiv idcontainer/div/div!-- 实体编辑对话框 --el-dialog title新增实体 :visible.syncdialogVisible width45%el-form refform :modelformData label-width130px :rulesrules sizesmallel-form-item propentity_name_CN label逻辑实体中文名el-input v-modelformData.entity_name_CN clearable/el-input/el-form-itemel-form-item propentity_name_EN label逻辑实体英文名el-input v-modelformData.entity_name_EN clearable/el-input/el-form-itemdiv classfield-containerdiv classfield-container__titlediv classprimary-title字段信息/divel-button typeprimary sizesmall iconel-icon-plus clickaddField新增一行/el-button/divel-table :dataformData.formField height250el-table-column typeindex width50 label序号 aligncenter/el-table-columnel-table-column propcname label字段中文名 width150 aligncentertemplate v-slot:default{ $index }el-input sizesmall v-modelformData.formField[$index].cname/el-input/template/el-table-columnel-table-column propename label字段英文名 width200 aligncentertemplate v-slot:default{ $index }el-input sizesmall v-modelformData.formField[$index].ename/el-input/template/el-table-columnel-table-column propefType label字段类型 aligncentertemplate v-slot:default{ $index }el-select v-modelformData.formField[$index].efType sizesmallel-option v-foritem in options :keyitem :labelitem :valueitem/el-option/el-select/template/el-table-columnel-table-column label操作 fixedright aligncenter width80template v-slot:default{ $index }el-button typedanger sizesmall clickhandleFieldDelete($index)删除/el-button/template/el-table-column/el-table/div/el-formspan slotfooterel-button clickdialogVisible false取消/el-buttonel-button typeprimary clickonSubmit(formData)确定/el-button/span/el-dialog/div
/templatescript
import { Graph, Shape } from antv/x6;
import { Dnd } from antv/x6-plugin-dnd;
import { register } from antv/x6-vue-shape;
import CellNode from ./CellNode.vue;export default {name: FlowEditor,data() {return {graph: null,dialogVisible: false,formData: {entity_name_CN: ,entity_name_EN: ,formField: [{ cname: , ename: , efType: }],},options: [STRING, NUMBER, BOOLEAN, DATE, EMAIL],};},mounted() {this.$nextTick(() {this.initGraph();});},methods: {initGraph() {const container document.getElementById(container);const config {container,width: 100%,height: 100%,autoResize: true,panning: true,mousewheel: true,};this.graph new Graph(config);const dnd new Dnd({target: this.graph,validateNode: (node) {this.currentDragNode node;this.dialogVisible true;return false;},});this.dnd dnd;},startDrag(e) {const node this.graph.createNode({shape: CellNode,});this.dnd.start(node, e);},onSubmit(data) {this.dialogVisible false;const node this.graph.addNode(this.currentDragNode);node.setData(data);},addField() {this.formData.formField.push({ cname: , ename: , efType: });},handleFieldDelete(index) {this.formData.formField.splice(index, 1);},},
};
/script3. 创建自定义 Vue 节点
在 src/components/CellNode.vue 中实现自定义的 Vue 节点组件。以下是代码
templatediv stylebackground-color: #ffffff;el-table :dataformData.formField stylewidth: 100% height250el-table-column label资源名称 :formatter() formData.entity_name_CN/el-table-columnel-table-column propcname label中文名/el-table-columnel-table-column propename label英文名/el-table-columnel-table-column propefType label类型/el-table-column/el-table/div
/templatescript
export default {name: CellNode,inject: [getNode],data() {return {node: null,formData: {entity_name_CN: ,entity_name_EN: ,formField: [{ cname: , ename: , efType: }],},};},mounted() {const node this.getNode();this.node node;node.on(change:data, (data) {if (data.cell data.cell.data) {this.formData node.getData();}});},
};## 4. 注册自定义节点 在主组件中使用 antv/x6-vue-shape 注册自定义的 Vue 节点
import { register } from antv/x6-vue-shape;
import CellNode from ./CellNode.vue;register({shape: CellNode,width: 300,height: 250,component: CellNode,
});样式优化 在 src/styles/index.scss 中添加全局样式
.flow-container {width: 100%;height: 100%;display: flex;flex-direction: column;.flow-nav {display: flex;align-items: center;margin-bottom: 5px;.add-entity {border-radius: 6px;background: rgba(64, 158, 255, 0.7);border-color: #409eff;border-style: dashed;text-align: center;color: #fff;font-size: 14px;padding: 5px;box-sizing: content-box;width: 100px;cursor: pointer;}}.flow-content {flex: 1;}
}四、运行项目
完成以上步骤后运行项目
npm run serve打开浏览器访问 http://localhost:8080你将看到一个支持拖拽添加节点、动态字段编辑的流程图编辑器。
五、总结 通过 AntV X6 和 ElementUI 的结合我们实现了一个功能丰富的流程图编辑器。AntV X6 提供了强大的图形化能力ElementUI 提供了丰富的 UI 组件两者结合可以快速搭建出高效的可视化工具。
完整代码
Graph.vue代码
// Graph.vue
templatediv classflow-container!-- 导航栏 --div classflow-navdiv classadd-entity mousedownstartDrag添加实体/divel-button typeprimary stylemargin-left: 10px plain sizemedium保存/el-buttonel-button typewarning stylemargin-left: 10px plain sizemedium清空/el-buttonel-button typesuccess stylemargin-left: 10px plain sizemedium导出/el-buttonel-upload accept.JSON :on-progresshandleOnProgress action :show-file-listfalseel-button plain sizeprimary stylemargin-left: 10px导入/el-button/el-upload/div!-- 画布 --div classflow-content div idcontainer/div/div!-- 实体编辑对话框 --el-dialog classdialog-box title新增实体 :visible.syncdialogVisible width45% :before-closehandleClose append-to-bodyfalsediv classcontent-wrapperdiv classprimary-title基本信息/divel-formrefform:modelformDatalabel-width130px:rulesrulessizesmallel-form-item propentity_name_CN label逻辑实体中文名el-input v-modelformData.entity_name_CN clearable/el-input/el-form-itemel-form-item propentity_name_EN label逻辑实体英文名el-input v-modelformData.entity_name_EN clearable/el-input/el-form-itemdiv classfield-containerdiv classfield-container__titlediv classprimary-title字段信息/divdiv classfield-operationel-buttontypeprimarysizesmalliconel-icon-plusclickaddField新增一行/el-button/div/divel-table :dataformData.formField label-positioncenter height250el-table-column typeindex width50 label序号 aligncenter/el-table-columnel-table-columnpropertycnamelabel字段中文名width150aligncentertemplate v-slot:default{ $index } el-input sizesmall v-modelformData.formField[$index].cname/el-input/template/el-table-columnel-table-columnpropertyenamelabel字段英文名width200aligncentertemplate v-slot:default{ $index } el-input sizesmall v-modelformData.formField[$index].ename/el-input/template/el-table-columnel-table-columnpropertyefTypelabel字段类型aligncentertemplate v-slot:default{ $index }el-selectv-modelformData.formField[$index].efTypedefault-first-optionplaceholder请选择字段类型clearablesizesmallel-optionv-foritem in options:keyitem:labelitem:valueitem/el-option/el-select/template/el-table-columnel-table-column label操作 fixedright aligncenter width80template v-slot:default{ $index }el-buttontypedangersizesmallclickhandleFieldDelete($index)删除/el-button/template/el-table-column/el-table/div/el-form/divspan slotfooter classdialog-footerel-button clickdialogVisible false取 消/el-buttonel-button typeprimary clickonSubmit(formData)确 定/el-button/span/el-dialog/div
/templatescript
// import index from ../../index.js
import { Graph, Shape } from antv/x6
import { Dnd } from antv/x6-plugin-dnd
import { register } from antv/x6-vue-shape
import CellNode from ./components/cellNode.vue// 画布配置
const config {container: null,width: 100%,height: 100%,autoResize: true,// 拖拽画布panning: true,mousewheel: true,connecting: {snap: true, // 是否开启连线自动吸附highlight: true, // 是否高亮显示连线router: manhattan,connectionPoint: anchor,anchor: center,allowBlank: false,// 不允许创建循环连线即边的起始节点和终止节点为同一节点allowEdge: false,// 不允许起点终点相同allowLoop: false,// 是否允许边连接到非节点上allowNode: false,// 起始和终止节点的相同连接桩之间只允许创建一条边allowMulti: witPort},background: {color: #F2F7FA},grid: {visible: true,type: doubleMesh,args: [{color: #eee, // 主网格线颜色thickness: 1 // 主网格线宽度},{color: #ddd, // 次网格线颜色thickness: 1, // 次网格线宽度factor: 4 // 主次网格线间隔}]}
}
// 连接桩配置
const ports {groups: {// 对话框需要的一些外部数据right: {position: right,attrs: {circle: {r: 5,magnet: true,stroke: #5F95FF,strokeWidth: 1,fill: #fff}}},left: {position: left,attrs: {circle: {r: 5,magnet: true,stroke: #5F95FF,strokeWidth: 1,fill: #fff}}}}
}
// 注册HTML节点
Shape.HTML.register({shape: custom-html,width: 160,height: 80,effect: [data],html (formData) {const data formDataconst div document.createElement(div)div.className custom-htmlconst span1 document.createElement(span)const span2 document.createElement(span)const span3 document.createElement(span)span1.innerText 1111span2.innerText 2222span3.innerText 3333div.appendChild(span1)div.appendChild(span2)div.appendChild(span3)return div}
})
// 注册Vue节点
register({shape: CellNode,width: 300,height: 250,component: CellNode,ports: {...ports,items: [{ group: left }, { group: right }]}
})
// 注册边
Graph.registerEdge(dag-edge,{inherit: edge,attrs: {line: {stroke: #C2C8D5,strokeWidth: 1,targetMarker: null}}},true
)export default {name: vue-flow,data () {return {graph: null,currentEdge: null,dnd: null,dialogVisible: false,currentDragNode: null,// 对话框类型 编辑/新增formData: {entity_name_CN: ,entity_name_EN: ,// field_list: [],formField: [{cname: ,ename: ,efType: }]},options: [STRING,NUMBER,BOOLEAN,DATE,EMAIL,URL,ARRAY,OBJECT,TEXTAREA,SELECT,RADIO,CHECKBOX,PASSWORD,FILE,IMAGE,RANGE,COLOR,TEL,SEARCH,DATETIME,DATETIME_LOCAL,MONTH,WEEK,TIME,HIDDEN],rules: {entity_name_CN: [{ required: true, trigger: blur, message: 请输入逻辑实体中文名 }],entity_name_EN: [{ required: true, trigger: blur, message: 请输入逻辑实体英文名 }]}}},provide () {return {// 要用箭头函数保证this在其他组件获取正确getGraph: () {return this.graph}}},mounted () {this.$nextTick(() {this.initGraph()})},methods: {initGraph () {// 容器domconst container document.getElementById(container)config.container container// 实例化画布this.graph new Graph(config)// 实例化拖拽节点const dnd new Dnd({target: this.graph,validateNode: (node) {this.currentDragNode nodethis.dialogVisible truereturn false}})this.dnd dndthis.graph.centerContent() // 居中显示},startDrag (e) {const node this.graph.createNode({shape: CellNode})this.dnd.start(node, e)},handleClose (done) {this.$confirm(确认关闭).then(_ {done()}).catch(_ {})},// 添加节点addNode (node) {return this.graph.addNode(node)},onSubmit (data) {this.dialogVisible falseif (this.currentDragNode) {const node this.addNode(this.currentDragNode)const dataSource {...data}// TODO 有异步问题需要处理先写死200mssetTimeout(() {node.setData(dataSource)}, 200)}},addField () {this.formData.formField.push({cname: ,ename: ,efType: })},handleFieldDelete () {this.formData.formField.splice(0, 1)}}
}
/scriptstyle langscss
$height: 40px;
.custom-html {display: flex;width: 100%;height: 100%;align-items: center;background-color: #fff;span {display: inline-block;height: $height;line-height: $height;border: 1px solid #0f7bcc;text-align: center;min-width: 0;flex: 1;}
}.flow-container {width: 100%;height: 100%;display: flex;flex-direction: column;.flow-nav {display: flex;align-items: center;margin-bottom: 5px;.add-entity {border-radius: 6px;background: rgba(64, 158, 255, 0.7);background-clip: padding-box;border-color: #409eff;border-style: dashed;text-align: center;color: #fff;font-size: 14px;padding: 5px;box-sizing: content-box;width: 100px;cursor: pointer;}}.flow-content {flex: 1;}.my-selecting {border: 1px dashed #40ff7c;background-color: #0f7bcc;}.x6-widget-selection-box {border: 0px dashed rgba(0, 0, 0, 0);box-shadow: 1px 1px 10px 0 rgba(0, 0, 0, 0.3);border-radius: 6px;// background-color: #0F7BCC;// opacity: 0.1;}.x6-widget-selection-inner {opacity: 0.1;border: 5px solid #000000;background-color: #0f7bcc;}}
.dialog-box{// width: 600%;// height: 800px;.el-dialog__title{color:#fff;font-size: 18px;
}.content-wrapper {padding:15px;.primary-title {font-size: 18px;font-weight: 700;padding-bottom: 10px;}.field-container {__title {display: flex;justify-content: space-between;}}
}
}
/style
cellNode.vue代码
templatediv stylebackground-color: #ffffff;el-table:dataformData.formFieldstylewidth: 100%height250el-table-column :label资源名称${formData.entity_name_CN}el-table-columnpropcnamelabel中文名/el-table-columnel-table-columnpropenamelabel英文名/el-table-columnel-table-columnpropefTypelabel类型/el-table-column/el-table-column/el-table/div
/templatescript
export default {name: CellNode,inject: [getNode],data () {return {// 当前实体节点node: null,formData: {entity_name_CN: ,entity_name_EN: ,formField: [{cname: ,ename: ,efType: }]}}},mounted () {// 获取node节点const node this.getNode()this.node node// 节点data改变监听node.on(change:data, (data) {if (data.cell data.cell.data) {this.formData node.getData()console.log( ~ :, this.formData)}})}
}
/script
