vue.js入门教学第15讲(Vue.js 使用AntV X6的示例步骤)
类别:编程学习 浏览量:145
时间:2022-03-31 12:23:18 vue.js入门教学第15讲
Vue.js 使用AntV X6的示例步骤目录
- 0x0 前言
- 0x1 安装
- 0x2 节点侧边栏
- 0x3 整合例子
因为项目用到流程图,并且需求也算是不详细,所以选择比较灵活的 x6 图形编辑器作为流程图编辑器,从文档来看不算复杂,这边就是作为参考教程。
Antv X6 文档
0x1 安装根据教程提示安装 x6 依赖即可,然后新建个容器进行实例化:
<li ref="containerRef" class="area-center-container" />
const data = { // 节点 nodes: [ { id: 'node1', // String,可选,节点的唯一标识 x: 40, // Number,必选,节点位置的 x 值 y: 40, // Number,必选,节点位置的 y 值 width: 80, // Number,可选,节点大小的 width 值 height: 40, // Number,可选,节点大小的 height 值 label: 'hello', // String,节点标签 }, { id: 'node2', // String,节点的唯一标识 x: 160, // Number,必选,节点位置的 x 值 y: 180, // Number,必选,节点位置的 y 值 width: 80, // Number,可选,节点大小的 width 值 height: 40, // Number,可选,节点大小的 height 值 label: 'world', // String,节点标签 }, ], // 边 edges: [ { source: 'node1', // String,必须,起始节点 id target: 'node2', // String,必须,目标节点 id }, ], } function initGraph() { const graph = new Graph({ container: this.$refs.containerRef, grid: { size: 10, // 网格大小 10px visible: true // 渲染网格背景 }, snapline: { enabled: true, // 对齐线 sharp: true }, scroller: { enabled: true, pageVisible: false, pageBreak: false, pannable: true } }) // 画布居中 graph.centerContent() graph.fromJSON(data) }
就这样最简单例子实现了,上面不同的参数请参考文档对应的解释。
0x2 节点侧边栏根据文档的 stencil 例子,可以简化很多代码量,直接用封装好的业务就行了,和上面一样直接写个容器实例化即可:
<el-aside ref="stencilRef" class="area-left" />
this.stencil = new Stencil({ title: '流程节点侧边栏', target: graph, search: false, collapsable: true, stencilGraphWidth: this.$refs.stencilRef.$el.clientWidth, stencilGraphHeight: this.$refs.stencilRef.$el.clientHeight, groups: [ { name: 'group', title: '流程图节点', collapsable: false } ], getDropNode: node => { let cloneNode = node.clone() switch (node.shape) { case 'rect': cloneNode = new RectShape() break case 'circle': cloneNode = new CircleShape() break case 'polygon': cloneNode = new PolylineShape() break } cloneNode.updateInPorts(graph) return cloneNode } }) // 加载节点 this.stencil.load([new Rect(rectInfo), new Circle(circleInfo), new Polygon(polygonInfo)], 'group')
在线:https://codesandbox.io/s/icy-meadow-rqihx
以上就是Vue.js 使用Antv X6的示例步骤的详细内容,更多关于Vue.js 使用 Antv X6的资料请关注开心学习网其它相关文章!
您可能感兴趣
- vueelementui侧边栏(Vue Element UI自定义描述列表组件)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue-router起步教程交流(vue3使用vue-router的完整步骤记录)
- vue集成文件上传插件(vue 实现上传组件)
- vue重置密码(Vue 两个字段联合校验之修改密码功能的实现)
- vue2和vue3都如何创建项目(vue3.0+vite2实现动态异步组件懒加载)
- vuex-table行列转换效果(vue3+el-table实现行列转换)
- vue功能测试和生产环境切换(vue 单元测试的推荐插件和使用示例)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue组件开发步骤(解析如何自动化生成vue组件文档)
- vue一个组件两种样式(Vue实现动态样式的多种方法汇总)
- vue使用elementui框架(总结Vue Element UI使用中遇到的问题)
- springbootvue项目代码(Vue+SpringBoot实现支付宝沙箱支付的示例代码)
- vue中怎么触发复选框的点击事件(vue点击弹窗自动触发点击事件的解决办法模拟场景)
- vue和springboot分页开发实现(解决Vue+SpringBoot+Shiro跨域问题)
- vue验证码怎么用(vue验证码组件使用方法详解)
- OPPO用户看过来 汇总几个春节实用技巧,轻松搞定多设备联动玩法(汇总几个春节实用技巧)
- 北京旅游攻略(北京旅游攻略5日游及其花费)
- 四川旅游攻略(四川旅游攻略自由行攻略)
- 上海迪士尼攻略(上海迪士尼攻略旅游)
- 哪里可以看熊猫(成都哪里可以看熊猫)
- oppo手机的三种录屏方法,你知道有哪些吗(oppo手机的三种录屏方法)
热门推荐
- sqlserver中复合索引(浅析SQL Server 聚焦索引对非聚集索引的影响)
- lnmp SSL证书使用教程(lnmp1.5使用Let'sEncrypt创建SSL证书自动续期问题)
- tomcat是异步非阻塞吗(浅谈Tomcat如何打破双亲委托机制)
- python编写小程序实现密码验证(python实现扫描ip地址的小程序)
- mysql发生系统错误(MySQL too many connections错误的原因及解决)
- tornado异步编程(Tornado Web服务器中处理空白字符的解决方案)
- dedecms标签调用大全(dedecms 官方网站或演示地址字段长度不够出现截断的修改方法)
- iframe 弹窗(遮罩层 + Iframe实现界面自动显示的示例代码)
- sqlserver的图形表(SQL Server纵表与横表相互转换的方法)
- python核心编程内容(顶级大神Linux,Python,Go,PHP之父谁是夜猫子?用Python揭秘!)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9