jsplumb 点击节点或者连线高亮显示

4 篇文章 0 订阅

利用jsplumb点击某个节点或者连接线高亮显示,改变颜色
效果图:
在这里插入图片描述

连接线高亮:

   this.jsPlumb.bind('click', (conn, originalEvent) => {
     console.log(conn,originalEvent);
     //取消所有连线的高亮颜色
     this.jsPlumb.select().setPaintStyle({  stroke: '#A5AAB9',outlineStroke: "transparent"})
     //设置当前连接线高亮
     conn.setPaintStyle({stroke: '#0a0', outlineStroke: "#FCFD3C"})
})

节点高亮:相对简单一些,可以设置一个变量和节点的某一属性相等,设置背景颜色

 <div  @click="clickNode"   :style=" {background: aa === bb ? '#0a0': '#00ffff'}" ></div>
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实现点击添加连线的功能,可以分为以下几个步骤: 1. 安装 jsplumb 和 vue2 的依赖库,可以使用 npm 或者 yarn 安装。 2. 在 vue2 组件的 mounted 钩子函数中,初始化 jsplumb 实例。 3. 在模板中定义需要连接的元素,通过 ref 获取元素的 DOM 节点,并设置唯一的 id。 4. 在 jsplumb 实例中,通过 makeSource 和 makeTarget 方法将元素设置为源和目标,使它们具有可连接的属性。 5. 在模板中定义连接按钮,通过点击事件触发连接函数。 6. 在连接函数中,通过 connect 方法连接源和目标元素,并设置连接线的样式和标签。 下面是一个示例代码片段,可以作为实现的参考: ```html <template> <div> <div ref="source" id="source">source</div> <div ref="target" id="target">target</div> <button @click="connect">connect</button> </div> </template> <script> import jsPlumb from 'jsplumb' export default { mounted() { this.jsPlumbInstance = jsPlumb.getInstance() this.jsPlumbInstance.makeSource(this.$refs.source, { endpoint: 'Dot', isSource: true, connector: ['Flowchart', { stub: [40, 60], gap: 10 }], anchor: 'Bottom', connectorStyle: { stroke: '#5c96bc', strokeWidth: 2 }, hoverPaintStyle: { stroke: '#1e8151', strokeWidth: 2 }, connectorHoverStyle: { strokeWidth: 3 } }) this.jsPlumbInstance.makeTarget(this.$refs.target, { endpoint: 'Dot', isTarget: true, connector: ['Flowchart', { stub: [40, 60], gap: 10 }], anchor: 'Top', connectorStyle: { stroke: '#5c96bc', strokeWidth: 2 }, hoverPaintStyle: { stroke: '#1e8151', strokeWidth: 2 }, connectorHoverStyle: { strokeWidth: 3 } }) }, methods: { connect() { this.jsPlumbInstance.connect({ source: this.$refs.source, target: this.$refs.target, endpoint: 'Dot', connector: ['Flowchart', { stub: [40, 60], gap: 10 }], anchor: ['Bottom', 'Top'], paintStyle: { stroke: '#5c96bc', strokeWidth: 2 }, hoverPaintStyle: { stroke: '#1e8151', strokeWidth: 2 }, overlays: [['Label', { label: 'connection', location: 0.5, id: 'label' }]], connectorHoverStyle: { strokeWidth: 3 } }) } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值