devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue2 + jsPlumb_jsplumb vue

作者：花生_TL007 | 2024-02-19 22:50:30

赞

踩

jsplumb vue

vue+jsplumb实现连线绘图，供大家参考，具体内容如下

jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的浏览器，则使用VML技术。

效果如图

1.安装

npm install jsplumb --save

2.main.js 引入

  1. import jsPlumb from 'jsplumb'
  2.  
  3. Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

3.封装组件 linkDataJsPlumb.vue

  1. <template>
  2.     <div>
  3.         <div id="container" class='clear-float'>
  4.             <div class="left">
  5.                 <ul>
  6.                     <div class='titleContend clear-float'>
  7.                         <div class='float firstField'>源表字段</div>
  8.                         <div class='float secondField'>类型</div>
  9.                         <div class='float thirdField'>描述</div>
  10.                     </div>
  11.                     <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source">
  12.                         <div class='titleContend clear-float'>
  13.                             <div class='float firstField'>{{item.name}}</div>
  14.                             <div class='float secondField'>{{item.name}}</div>
  15.                             <div class='float thirdField'>{{item.name}}</div>
  16.                         </div>
  17.                     </li>
  18.                 </ul>
  19.             </div>
  20.             <div class="right">
  21.                 <ul>
  22.                     <div class='titleContend clear-float'>
  23.                         <div class='float firstField'>识别字段</div>
  24.                     </div>
  25.                     <li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target">
  26.                         <div class='titleContend clear-float'>
  27.                             <div class='float firstField'>{{item.name}}</div>
  28.                         </div>
  29.                     </li>
  30.                 </ul>
  31.             </div>
  32.         </div>
  33.     </div>
  34. </template>
  35.  
  36. <script>
  37. export default {
  38.     name: 'linkElementModal',
  39.     props: {
  40.         // 左侧数据 [{ name: 'xxx_left_1', nodeId: 'left_1' }]
  41.         leftList: {
  42.             type: Array,
  43.             default: () => {
  44.                 return [];
  45.             }
  46.         },
  47.         // 右侧数据 [{ name: 'xxx_right_1', nodeId: 'right_1' }]
  48.         rightList: {
  49.             type: Array,
  50.             default: () => {
  51.                 return [];
  52.             }
  53.         },
  54.         // 默认数据 [{left: 'left_1', right: 'right_1'}]
  55.         value: {
  56.             type: Array,
  57.             default: () => {
  58.                 return [];
  59.             }
  60.         }
  61.     },
  62.     data () {
  63.         return {
  64.             jsPlumb: null // 缓存实例化的jsplumb对象
  65.         };
  66.     },
  67.     mounted () {
  68.         this.showPlumb();
  69.     },
  70.     methods: {
  71.         showPlumb () {
  72.             this.jsPlumb = this.$jsPlumb.getInstance({
  73.                 Container: 'container', // 选择器id
  74.                 EndpointStyle: { radius: 0.11, fill: '#999' }, // 端点样式
  75.                 PaintStyle: { stroke: '#999', strokeWidth: 2 }, // 绘画样式，默认8px线宽  #456
  76.                 HoverPaintStyle: { stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式  默认为null
  77.                 ConnectionOverlays: [ // 此处可以设置所有箭头的样式
  78.                     ['Arrow', { // 设置参数可以参考中文文档
  79.                         location: 1,
  80.                         width: 10,
  81.                         length: 6,
  82.                         paintStyle: {
  83.                             stroke: '#999',
  84.                             fill: '#999'
  85.                         }
  86.                     }]
  87.                 ],
  88.                 Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等
  89.                 DrapOptions: { cursor: 'crosshair', zIndex: 2000 }
  90.             });
  91.  
  92.             this.jsPlumb.batch(() => {
  93.                 for (let i = 0; i < this.leftList.length; i++) {
  94.                     this.initLeaf(this.leftList[i].nodeId, 'source');
  95.                 }
  96.                 for (let j = 0; j < this.rightList.length; j++) {
  97.                     this.initLeaf(this.rightList[j].nodeId, 'target');
  98.                 }
  99.             });
  100.  
  101.             this.setjsPlumb(true, true);
  102.  
  103.             // 点击连线
  104.             this.jsPlumb.bind('click', (conn, originalEvent) => {
  105.                 this.value.forEach((item, index) => {
  106.                     if (item.left == conn.sourceId) {
  107.                         this.value.splice(index, 1);
  108.                     }
  109.                 });
  110.                 this.jsPlumb.deleteConnection(conn);
  111.             });
  112.  
  113.             // 连线时触发
  114.             this.jsPlumb.bind('connection', (conn, originalEvent) => {
  115.                 let obg = {
  116.                     left: conn.sourceId,
  117.                     right: conn.targetId
  118.                 };
  119.                 this.value.push(obg);
  120.             });
  121.  
  122.             // 右键触发
  123.             this.jsPlumb.bind('contextmenu', (conn, originalEvent) => {
  124.                 console.log(conn, originalEvent);
  125.             });
  126.         },
  127.         //  初始化规则使其可以连线、拖拽
  128.         initLeaf (id, type) {
  129.             const ins = this.jsPlumb;
  130.             const elem = document.getElementById(id);
  131.             if (type === 'source') {
  132.                 ins.makeSource(elem, {
  133.                     anchor: [1, 0.5, 0, 0], // 左 上 右 下
  134.                     allowLoopback: false, // 允许回连
  135.                     maxConnections: 1 // 最大连接数（-1表示不限制）
  136.                 });
  137.             } else {
  138.                 ins.makeTarget(elem, {
  139.                     anchor: [0, 0.5, 0, 0],
  140.                     allowLoopback: false,
  141.                     maxConnections: 1
  142.                 });
  143.             }
  144.         },
  145.         setjsPlumb (sourceFlag, targetFlag) {
  146.             const source = document.getElementsByName('source');
  147.             const target = document.getElementsByName('target');
  148.             this.jsPlumb.setSourceEnabled(source, sourceFlag);
  149.             this.jsPlumb.setTargetEnabled(target, targetFlag);
  150.             this.jsPlumb.setDraggable(source, false); // 是否支持拖拽
  151.             this.jsPlumb.setDraggable(target, false); // 是否支持拖拽
  152.             // 是否含有默认数据
  153.             if (this.value.length > 0) {
  154.                 this.initConnect();
  155.             }
  156.         },
  157.         // 默认链接
  158.         initConnect () {
  159.             const jsplumbConnectOptions = {
  160.                 isSource: true,
  161.                 isTarget: true,
  162.                 // 动态锚点、提供了4个方向 Continuous、AutoDefault
  163.                 anchor: 'Continuous'
  164.             };
  165.             this.jsPlumb.deleteEveryConnection();
  166.             for (var i = 0; i < this.value.length; i++) {
  167.                 let line = this.value[i];
  168.                 this.jsPlumb.connect({
  169.                     source: line.left,
  170.                     target: line.right
  171.                 }, jsplumbConnectOptions);
  172.             }
  173.         }
  174.     }
  175. };
  176. </script>
  177.  
  178. <style>
  179. #container {
  180.     width: 500px;
  181.     padding: 20px;
  182.     position: relative; /*一定加上这句，否则连线位置发生错乱*/
  183. }
  184.  
  185. .left {
  186.     float: left;
  187.     width: auto;
  188. }
  189. .right {
  190.     float: right;
  191.     width: auto;
  192. }
  193.  
  194. .left li,
  195. .right li {
  196.     list-style: none;
  197.     width: auto;
  198. }
  199. </style>
  200. <style lang='scss' scoped>
  201. .titleContend {
  202.     width: auto;
  203.     height: 30px;
  204.     line-height: 30px;
  205.     border-bottom: 1px solid #cccccc;
  206.     .float {
  207.         float: left;
  208.     }
  209.     .firstField {
  210.         width: 100px;
  211.     }
  212.     .secondField {
  213.         width: 100px;
  214.     }
  215.     .thirdField {
  216.         width: 80px;
  217.     }
  218. }
  219. </style>

4.使用组件 

  1. <linkDataJsPlumb v-model='defaultList' :leftList='leftList' :rightList='rightList'/>
  2.  
  3. import linkDataJsPlumb from './components/linkDataJsPlumb';
  4.  
  5. // 左侧数据
  6. leftList: [
  7.     { name: 'xxx_left_1', nodeId: 'left_1' },
  8.     { name: 'xxx_left_2', nodeId: 'left_2' },
  9.     { name: 'xxx_left_3', nodeId: 'left_3' },
  10.     { name: 'xxx_left_4', nodeId: 'left_4' }
  11. ],
  12. rightList: [
  13.     { name: 'xxx_right_1', nodeId: 'right_1' },
  14.     { name: 'xxx_right_2', nodeId: 'right_2' },
  15.     { name: 'xxx_right_3', nodeId: 'right_3' },
  16.     { name: 'xxx_right_4', nodeId: 'right_4' }
  17. ],
  18. // 默认值
  19. defaultList: [
  20.     {left: 'left_1', right: 'right_2'},
  21.     {left: 'left_2', right: 'right_3'},
  22.     {left: 'left_3', right: 'right_1'}
  23. ]

博客前端开发 | NoteZ_技术博客

中文mirrors / wangduanduan / jsplumb-chinese-tutorial · GitCode

jsPlumb的初始化

使用jsPlumb进行实例化的同时可以传入相关属性的设置。

  1. this.jsp = jsPlumb.getInstance({
  2.     Anchor: ["Right", "Left"], 
  3. //锚点位置，如left，top，bottom等；对任何没有声明描点的Endpoint设置锚点，
  4. //用于source或target节点
  5. //设置为数组可以指定锚点的位置
  6.     Anchors: ["Right", "Left"],  //连线的source和target Anchor
  7.     ConnectionsDetachable: false, //连线是否可用鼠标分离
  8.     ConnectionOverlays: [  //连线的叠加组件，如箭头、标签
  9. //叠加组件-箭头参数设置
  10.         ["Arrow", {  
  11.             location: 1,
  12.             visible: true,
  13.             width: 11,
  14.             length: 11,
  15.             id: "ARROW",
  16.             events: {
  17.                 click: function () {
  18.                 }
  19.             }
  20.         }],
  21. //叠加组件-标签参数设置
  22.         ["Label", {  
  23.             location: 0.1,
  24.             cssClass: "aLabel", //hover时label的样式名
  25.             events: {
  26.                 click:info=>{
  27.                     console.log(info);
  28.                 }
  29.             },
  30.             visible: true
  31.         }]
  32.     ],
  33.     Connector: "Straight", 
  34. //连线的类型，有直线（Sright），有流程图(Flowchart)、贝塞尔曲线（Bezier)，State machine（状态机）
  35.     Container: "module",
  36.  //父级元素id；假如页面元素所在上层不同，最外层父级一定要设置
  37.     DoNotThrowErrors: false,
  38.  //如果请求不存在的Anchor、Endpoint或Connector，是否抛异常
  39.     DragOptions : { },//用于配置拖拽元素的参数
  40.     DropOptions : { },//用于配置元素的drop行为的参数
  41.     Endpoint: "Dot", //端点（锚点）的样式声明
  42.     Endpoints: [null, null],
  43.  //用jsPlumb.connect创建连接时，source端点和target端点的样式设置
  44.     EndpointOverlays: [], //端点的叠加物
  45.     EndpointStyle: {fill: 'transparent', stroke: '#1565C0', radius: 4, strokeWidth: 1}, //端点的默认样式
  46.     EndpointStyles: [null, null], //连线的source和target端点的样式
  47.     EndpointHoverStyle: {fill: '#1565C0', stroke: '#1565C0', radius: 4, strokeWidth: 1}, //端点hover时的样式
  48.     EndpointHoverStyles: [null, null], //连线的source和target端点hover时的样式
  49.     HoverPaintStyle: {stroke: '#1565C0', strokeWidth: 3}, //连线hover时的样式
  50.     LabelStyle: {color: "black"}, //标签的默认样式，用css写法。
  51.     LogEnabled: false, //是否开启jsPlumb内部日志
  52.     Overlays: [], //连线和端点的叠加物
  53.     MaxConnections: 10, //端点支持的最大连接数
  54.     PaintStyle: {stroke: '#1565C0', strokeWidth: 1, joinstyle: 'round'}, //连线样式
  55.     ReattachConnections: true, //是否重新连接使用鼠标分离的线?
  56.     RenderMode: "svg", //默认渲染模式
  57.     Scope: "jsPlumb_DefaultScope", //范围，具有相同scope的点才可
  58.     reattach: true,
  59. })

jsPlumb的相关方法

  • 添加连线

  1. let params={source: info.sourceId, target: info.targetId};
  2. let setting=为自定义的jsPlumb设置，也可以不传入
  3. this.jsp.connect(params,setting);

  • 删除连线

this.jsp.removeAllEndpoints(node)这个方法删除指定的节点和连线，传入的node为节点元素
this.jsp.deleteEveryConnection();这个方法删除所有连线，不需要传入参数      
this.jsp.deleteEveryEndpoint();这个方法删除所有节点，不需要传入参数
this.jsp.deleteConnectionsForElement("A-1",{});删除制定的连线，传入节点ID

  • 重绘连线

  1. this.jsp.repaintEverything()//重绘连线
  2. this.jsp.setSuspendDrawing(true);
  3. this.jsp.setSuspendDrawing(false,true);
  4. 这里第二个参数的true，会使整个jsPlumb立即重绘。

注意：

 因为jsPlumb 是通过DOM进行工作的，所以我们需要把jsPlumb初始化 放在mounted声明，
如果是在子组件中完成，需要保证子组件渲染完成才可进行处理，可以放在进行初始化this.$nextTick(()=>{  } )

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/117172
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号