jsPlumb

1、简介:jsPlumb是一个用于画流程图线的一个开源库。

2、体验:

2-1、引入jsPlumb

npm install jsPlumb --save

2-2、在文件里引入

import { jsPlumb } from 'jsplumb'

2-3、连接两个div

复制代码
let _this = this
jsPlumb.ready(function () {
                jsPlumb.connect({
                    source: _this.$refs.div1,//开始的dom或者id
                    target: _this.$refs.div3,//结束的dom或者id
                    endpoint: 'Blank',//连接端点的样式
                    connector: "Flowchart",//连接线的形状 贝塞尔曲线 直线等
                    anchor: ['Right', 'Left'],//连接位置
                    cssClass: 'inLine',//自定义类名
                    paintStyle: { stroke: 'lightgray', strokeWidth: 3 },//连接线样式
                })
})
复制代码

 

posted @   Pavetr  阅读(1199)  评论(0编辑  收藏  举报
编辑推荐:
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行:
· winform 绘制太阳,地球,月球 运作规律
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· 写一个简单的SQL生成工具
· AI 智能体引爆开源社区「GitHub 热点速览」
点击右上角即可分享
微信分享提示