在vue中使用jsplumb出现错误TypeError: Cannot read property 'parentNode' of null
这个错误是在新增数据源的时候出现的
<el-col class="object-box" :xs="4" :sm="4" :md="4" :lg="8" :xl="8">
<p>对象库</p>
<div class="object-item" v-for="(item ,index) in listArray">
<el-button @click="addPoint(item.procId,item.name)" class="button-style" type="primary">{{item.name}}</el-button>
</div>
</el-col>
画布
<div id="labelManage">
<div id="main">
<div class="flowchart-canvas" id="flowchart-canvas">
<div class="window" id="flow-start">开始</div>
<div class="window" id="flow-end">结束</div>
<!--<div class="window" id="flow-end-1">结束</div>-->
<div :class="item.className" class="window new-item" v-for="(item,index) in sourceArray" :id="item.id">{{item.name}}</div>
</div>
</div>
</div>
初始化和添加数据源
init(){
console.log('aaaaaa')
jsPlumb.ready(function() {
var jsPlumbChart = jsPlumb.getInstance({
DragOptions: { cursor: 'pointer', zIndex: 2000 },
PaintStyle: { stroke: '#2196f3', strokeWidth: 1 }, //配置自己拖拽小点的时候连接线的默认样式
Endpoint: ["Dot", {radius: 5}], //这个是控制连线终端那个小点的半径
// EndpointStyle : { fill : "red" }, //这个是控制连线终端那个小点的样式
// EndpointHoverStyle : { fill : "blue" }, //这个是控制连线终端那个小点的样式
Connector: ["Flowchart",{curviness:70}],
ConnectionOverlays: [
[ "Arrow", { location: 1 } ],
[ "Label", {
location: 0.5,
label: "流程",
id: "label",
cssClass: "aLabel"
}]
],
Container:"flowchart-canvas"
});
jsPlumbChart.draggable($('.window'));
jsPlumbChart.addEndpoint('flow-start',{uuid:1 , anchor: "Bottom", isSource:true});
jsPlumbChart.addEndpoint('flow-end',{uuid:2 ,anchor:'Top', isTarget:true});
// jsPlumbChart.addEndpoint('flow-end-1',{uuid:2 ,anchor:'Top', isTarget:true});
//init connect
// jsPlumbChart.connect({
// uuids:[1,2], //根据uuid进行连接
// paintStyle: { stroke: '#2196f3', strokeWidth: 2 }, //线的样式
// endpointStyle: { fill: 'blue', outlineStroke: 'darkgray', outlineWidth: 2 },//点的样式
// overlays: [ ['Arrow', { width: 12, length: 12, location: 0.5 }] ] //覆盖物 箭头 及 样式
// })
});
},
addPoint(procId,name){
this.sourceArray.push({
procId: procId,
parentNode: procId,
id: nodeId++,
name: name,
className: 'jtk-draggable jtk-endpoint-anchor'
})
console.log(nodeId,'nodeId')
console.log(nodeId.toString(),'nodeId')
jsPlumb.ready(function () {
var jsPlumbChart = jsPlumb.getInstance({
DragOptions: { cursor: 'pointer', zIndex: 2000 },
PaintStyle: { stroke: '#2196f3', strokeWidth: 1 }, //配置自己拖拽小点的时候连接线的默认样式
Endpoint: ["Dot", {radius: 5}], //这个是控制连线终端那个小点的半径
// EndpointStyle : { fill : "red" }, //这个是控制连线终端那个小点的样式
// EndpointHoverStyle : { fill : "blue" }, //这个是控制连线终端那个小点的样式
Connector: ["Flowchart",{curviness:70}],
ConnectionOverlays: [
[ "Arrow", { location: 1 } ],
[ "Label", {
location: 0.5,
label: "流程",
id: "label",
cssClass: "aLabel"
}]
],
Container:"flowchart-canvas"
});
jsPlumbChart.addEndpoint(nodeId.toString(), {
uuid:nodeId.toString(),
anchors: ['Right'],
isTarget:true
})
})
// jsPlumb.addEndpoint(nodeId.toString(),{uuid:nodeId.toString(), anchor:'Top', isTarget:true});
}
标签云
友情链接 申请友情链接
- 东方财富
- saucxs博客园
- weekly周报
- loveBook
- 前端博客
- 技术交流学习社区
- saucxs
- segmentfault
- saucxs的博客
- haorooms
- luckyscript
- 东方财富期货
- 峰云就她了
- binlive
- songEagle
- 且听风吟
- (TX)Heying Ye
- CG Online Judge
- Chris's Blog
- vueRouter
- 龙恩0707
- 鑫空间,鑫生活
- 木易杨
- MDN-js
- Cherry's Blog
- InterviewMap
- 安安哥的小戏台
- xiaojun1994-cat
- JavaScript-Garden
- junruchen-daily
- 秋天爱美丽
- web-summary-daily
- w3cplus-tb
- 潜行者m
- 于江水
- KieSun-git
- cnodejs
- aerminBlog
- fex_bd
- gwuhaolin-git
- Deboy's Blog
- react-china
- react.docschina
- Vuejs社区
- vuejsDoc
- cdnSocketIo
- shuaihuaCC
- colorize
- stazhu
- 前端学习
- IBM Dev社区
- linux运维笔记
- webpackDoc
- sayskyGithub
- 前端里
- 996.ICU
- electronjs
- CS-Notes
- mqyqingfengBlog
- beego官方
- 编码规范
- 阮一峰个人网站
- sessionstack
- damonareGoUp
- 咀嚼之味
- fe-interview
- xd-tayde/blog
- css-tricks
- ghmagical个人中心
- markyunp6
- hellogithub
- 霜序廿
- rin部落
- 建站素材
- 前端资源网
- CSS开发手册
- web技术交流
- 程新松个人网站
- wangEditor
- 小松博客
- 交流学习社区