😳 vue + svg 拓扑编辑与展示
https://mirror198829.github.io/vue-topo/dist/index.html
2016年9月接到html5替换flash的拓扑图任务,历时3月整,使用jquery+SVG技术完成第一款拓扑图组件,涵盖拖拽、缩放、删除、选中区域、连线、导入、保存图片、多种布局显示等功能,但当node数高达百位时,因dom的操作,出现了非常可怕的性能问题。
2017年10月20日,因新公司项目需要,果断决定结合当下流行的VUE2.0框架 + SVG技术 重写拓扑组件,并将此开源,希望大家多提意见
npm i vue-topo -save
import vTopo from 'vue-topo' import 'vue-topo/dist/vue-topo.min.css' Vue.use(vTopo)
npm install
npm run dev //启动服务
// xxx.vue
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 必填 | | --- | --- | --- | --- | --- | --- | | editable | 是否可编辑 | boolean | true/false | true | — | | topo-data | topo初始值 | object | — | {nodes:[],connectors:[]} | 是 |
代码开源,欢迎码农们提出宝贵意见,bug请提issues,本人将及时修改。最后著作权归一步工程师,请大家注明代码来源:https://github.com/Mirror198829/vue-topo