Vue 使用jsPlumb 实现连线绘图

第一步：安装jsPlumb

npm i jsplumb

第二步：全局引入

        在main.js 中引入，且挂在Vue事例上

1.  
   import jsPlumb from 'jsplumb'
2.  
    
3.  
   Vue.prototype.$jsPlumb = jsPlumb.jsPlumb

第三步：编写组件代码

创建 slsJsPlumbComponent.vue文件

1.  
   <template>
2.  
   <div>
3.  
   <div id="container">
4.  
   <div class="left1">
5.  
   <ul class="left1_ul">
6.  
   <li v-for="(item,index) in leftList" :key="'left' index" :id="item.nodeId" name="source">
7.  
   {{item.name}}
8.  
   </li>
9.  
   </ul>
10.  
    </div>
11.  
     
12.  
    <div class="right1">
13.  
    <ul class="left1_ul">
14.  
    <li v-for="(item,index) in rightList" :key="'right' index" :id="item.nodeId" name="target">
15.  
    {{item.name}}
16.  
    </li>
17.  
    </ul>
18.  
    </div>
19.  
    </div>
20.  
    </div>
21.  
    </template>
22.  
     
23.  
    <script>
24.  
    export default {
25.  
    name: "slsJsPlumbComponent",
26.  
    props:{
27.  
    leftList:{ //左边节点数组[{"name":"xxx",nodeId:"l_xxxx"}]
28.  
    type:Array
29.  
    },
30.  
    rightList:{//右边节点数组
31.  
    type:Array
32.  
    },
33.  
    isLink:{//是否可连接
34.  
    type:Boolean,
35.  
    default:true
36.  
    },
37.  
    fieldRelas:{//连接的详情
38.  
    type:Array
39.  
    }
40.  
    },
41.  
    data(){
42.  
    return {
43.  
    jsPlumb: this.$jsPlumb.getInstance({
44.  
    Container: 'container', // 选择器id
45.  
    EndpointStyle: {radius: 0.11, fill: '#999'}, // 端点样式
46.  
    PaintStyle: {stroke: '#999', strokeWidth: 2}, // 绘画样式，默认8px线宽 #456
47.  
    HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默认悬停样式 默认为null
48.  
    ConnectionOverlays: [ // 此处可以设置所有箭头的样式
49.  
    ['Arrow', { // 设置参数可以参考中文文档
50.  
    location: 1,
51.  
    length: 12,
52.  
    paintStyle: {
53.  
    stroke: '#999',
54.  
    fill: '#999'
55.  
    }
56.  
    }]
57.  
    ],
58.  
    Connector: ['Straight'], // 要使用的默认连接器的类型：直线，折线，曲线等
59.  
    DrapOptions: {cursor: 'crosshair', zIndex: 2000}
60.  
    }), // 缓存实例化的jsplumb对象
61.  
    field_rela:[]
62.  
    }
63.  
    },
64.  
    watch:{
65.  
    leftList(){
66.  
    if(this.isLink){
67.  
    this.$nextTick(()=>{
68.  
    this.showPlumb()
69.  
    })
70.  
    }
71.  
    },
72.  
    fieldRelas(){
73.  
    this.$nextTick(()=>{
74.  
    this.initConnect()
75.  
    })
76.  
    }
77.  
    },
78.  
    methods:{
79.  
    showPlumb() {
80.  
    // this.jsPlumb =
81.  
    let this_ = this
82.  
    this.jsPlumb.batch(() => {
83.  
    for(let i = 0; i < this_.leftList.length; i ){
84.  
    this_.initLeaf(this_.leftList[i].nodeId, 'source');
85.  
    }
86.  
    for(let j = 0; j < this_.rightList.length; j ){
87.  
    this_.initLeaf(this_.rightList[j].nodeId , 'target')
88.  
    }
89.  
    })
90.  
     
91.  
    this.setjsPlumb(true,true);
92.  
     
93.  
    //点击连线删除连接
94.  
    this.jsPlumb.bind('click', (conn, originalEvent) => {
95.  
    // console.log(conn, originalEvent)
96.  
    this.jsPlumb.deleteConnection(conn)
97.  
    let remIndex = -1
98.  
    for(let i=0;i<this.field_rela.length;i ){
99.  
    if("l_" this.field_rela[i].sls == conn.sourceId){
100.  
     remIndex = i
101.  
     }
102.  
     }
103.  
     this.field_rela.splice(remIndex,1)
104.  
     this.$emit("getFieldRela",this.field_rela)
105.  
     })
106.  
      
107.  
     //连线时触发 存储连接信息
108.  
     this.jsPlumb.bind('connection', (conn, originalEvent) => {
109.  
     // console.log(conn.sourceId)
110.  
     // console.log(conn.targetId)
111.  
     this.field_rela.push({"sls":conn.sourceId.replace("l_"),"table_field":conn.targetId.replace("r_")})
112.  
     this.$emit("getFieldRela",this.field_rela)
113.  
     })
114.  
      
115.  
     //右键触发
116.  
     /*this.jsPlumb.bind('contextmenu', (conn, originalEvent) => {
117.  
     console.log(conn, originalEvent)
118.  
     })*/
119.  
     },
120.  
     // 初始化规则使其可以连线、拖拽
121.  
     initLeaf(id, type) {
122.  
     const ins = this.jsPlumb;
123.  
     const elem = document.getElementById(id);
124.  
     if (type === 'source') {
125.  
     ins.makeSource(elem, {
126.  
     anchor: [1, 0.5, 0, 0], // 左 上 右 下
127.  
     allowLoopback: false, //允许回连
128.  
     maxConnections: 1 //最大连接数（-1表示不限制）
129.  
     })
130.  
     } else {
131.  
     ins.makeTarget(elem, {
132.  
     anchor: [0, 0.5, 0, 0],
133.  
     allowLoopback: false,
134.  
     maxConnections: 1
135.  
     })
136.  
     }
137.  
     },
138.  
     setjsPlumb(sourceFlag, targetFlag){
139.  
     const source = document.getElementsByName('source')
140.  
     const target = document.getElementsByName('target')
141.  
      
142.  
     this.jsPlumb.setSourceEnabled(source, sourceFlag)
143.  
     this.jsPlumb.setTargetEnabled(target, targetFlag)
144.  
     this.jsPlumb.setDraggable(source, false) // 是否支持拖拽
145.  
     this.jsPlumb.setDraggable(target, false) // 是否支持拖拽
146.  
     },
147.  
     clearAllNode(){
148.  
     this.jsPlumb.deleteEveryConnection()
149.  
     },
150.  
     initConnect(){
151.  
     const jsplumbConnectOptions ={
152.  
     isSource: true,
153.  
     isTarget: true,
154.  
     // 动态锚点、提供了4个方向 Continuous、AutoDefault
155.  
     anchor: "Continuous",
156.  
     }
157.  
     this.jsPlumb.deleteEveryConnection()
158.  
     for (var i = 0; i < this.fieldRelas.length; i ) {
159.  
     let line = this.fieldRelas[i]
160.  
     this.jsPlumb.connect({
161.  
     source: 'll_' line.sls,
162.  
     target: 'rr_' line.table_field,
163.  
     }, jsplumbConnectOptions);
164.  
     }
165.  
     }
166.  
     }
167.  
     }
168.  
     </script>
169.  
      
170.  
     <style scoped>
171.  
     .left1_ul{
172.  
     list-style: none;
173.  
     }
174.  
     #container{
175.  
     width: 500px;
176.  
     min-height: 200px;
177.  
     padding: 20px;
178.  
     position: relative; /*一定加上这句，否则连线位置发生错乱*/
179.  
     }
180.  
      
181.  
     .left1{
182.  
     float: left;
183.  
     width: 150px;
184.  
     }
185.  
     .right1{
186.  
     float: right;
187.  
     width: 150px;
188.  
     }
189.  
      
190.  
     .left1 li,.right1 li{
191.  
     width: 100%;
192.  
     border-radius: 4px;
193.  
     border: 1px solid #1e90ff;
194.  
     background: #70a1ff;
195.  
     margin-bottom: 20px;
196.  
     padding: 8px 5px;
197.  
     text-align: center;
198.  
     color: white;
199.  
     font-weight: bold;
200.  
     }
201.  
     </style>
202.  
      

在父组件中引入使用

这篇好文章是转载于：学新通技术网