此示例为主要代码,仅供参考
// 通过registerConnectionType定义样式,使用setType应用样式
jsPlumb.registerConnectionType('custom', {setting})
连线.setType('custom')
示例:
// 初始化jsplumb
let jsplumb = this.$jsPlumb.getInstance()
// 定义初始样式
let config = {
paintStyle: {stroke: '#6C8AB6', strokeWidth: 1},
connectorStyle: {stroke: '#6C8AB6', strokeWidth: 1},
connectorHoverStyle: {stroke: '#6C8AB6', strokeWidth: 3 },
hoverPaintStyle: { stroke: '#6C8AB6', strokeWidth: 3 }
}
// 设置连线
let c = jsplumb .connect({
source: sourceId,
target: targetId
}, config)
// 定义新样式
let setting = {
paintStyle: {stroke: '#E9BE37', strokeWidth: 1},
connectorStyle: {stroke: '#E9BE37', strokeWidth: 1},
connectorHoverStyle: {stroke: '#E9BE37', strokeWidth: 3 },
hoverPaintStyle: { stroke: '#E9BE37', strokeWidth: 3 }
}
// 应用新样式
jsPlumb.registerConnectionType('custom', setting)
c.setType('custom')
效果:
弹窗选择属性,确定后改变连线颜色