vue中jsplumb未连线

情况:从别的页面跳转过来,本来应该绘图,结果没有绘制线条

解决办法:创建实例

原代码:

print (point1, point2) {
            jsPlumb.ready(function () {
                jsPlumb.connect({
                    source: point1,
                    target: point2,
                    endpoint: 'Blank',
                    paintStyle: { stroke: '#999', strokeWidth: 1 },
                    connector: ['Flowchart'],
                    anchor: ['Bottom', 'Top'],
                    overlays: [
                        ['Arrow', { width: 12, length: 12, location: 0.9 }],
                        [
                            'Label',
                            {
                                // label: '我是文字啊\r\n &nbsp',
                                id: 'myLabel',
                                location: 0.5,
                                labelStyle: { color: '#47df33' }
                            }
                        ]
                    ],
                    maxConnections: -1
                });
            });
        }

修改后:

print (point1, point2) {
            let plumbIns = jsPlumb.getInstance(); / /这里是重点!!!
            plumbIns.ready(function () {
                plumbIns.connect({
                    source: point1,
                    target: point2,
                    endpoint: 'Blank',
                    paintStyle: { stroke: '#999', strokeWidth: 1 },
                    connector: ['Flowchart'],
                    anchor: ['Bottom', 'Top'],
                    overlays: [
                        ['Arrow', { width: 12, length: 12, location: 0.9 }],
                        [
                            'Label',
                            {
                                // label: '我是文字啊\r\n &nbsp',
                                id: 'myLabel',
                                location: 0.5,
                                labelStyle: { color: '#47df33' }
                            }
                        ]
                    ],
                    maxConnections: -1
                });
        }

找了好长的时间!!!

具体可以看看这个:https://zhuanlan.zhihu.com/p/41808577

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值