您好,登錄后才能下訂單哦!
小編給大家分享一下vue+jsplumb如何實(shí)現(xiàn)連線繪圖,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
具體內(nèi)容如下
jsPlumb是一個(gè)比較強(qiáng)大的繪圖組件,它提供了一種方法,主要用于連接網(wǎng)頁(yè)上的元素。在現(xiàn)代瀏覽器中,它使用SVG或者Canvas技術(shù),而對(duì)于IE8以下(含IE8)的瀏覽器,則使用VML技術(shù)。
效果圖
1.安裝
npm install jsplumb --save
2.main.js 引入
import jsPlumb from 'jsplumb' Vue.prototype.$jsPlumb = jsPlumb.jsPlumb
3.示例代碼
<template> <div> <div id="container"> <div class="left"> <ul> <li v-for="(item,index) in leftList" :key="'left' + index" :id="item.nodeId" name="source"> {{item.name}} </li> </ul> </div> <div class="right"> <ul> <li v-for="(item,index) in rightList" :key="'right' + index" :id="item.nodeId" name="target"> {{item.name}} </li> </ul> </div> </div> </div> </template> <script> export default { name: "linkElementModal", data() { return { jsPlumb: null, // 緩存實(shí)例化的jsplumb對(duì)象 leftList:[ {name: 'xxx_left_1', nodeId: 'left_1'}, {name: 'xxx_left_2', nodeId: 'left_2'}, {name: 'xxx_left_3', nodeId: 'left_3'}, {name: 'xxx_left_4', nodeId: 'left_4'} ], rightList:[ {name: 'xxx_right_1', nodeId: 'right_1'}, {name: 'xxx_right_2', nodeId: 'right_2'}, {name: 'xxx_right_3', nodeId: 'right_3'}, {name: 'xxx_right_4', nodeId: 'right_4'} ] } }, mounted(){ this.showPlumb(); }, methods:{ showPlumb() { this.jsPlumb = this.$jsPlumb.getInstance({ Container: 'container', // 選擇器id EndpointStyle: {radius: 0.11, fill: '#999'}, // 端點(diǎn)樣式 PaintStyle: {stroke: '#999', strokeWidth: 2}, // 繪畫(huà)樣式,默認(rèn)8px線寬 #456 HoverPaintStyle: {stroke: '#994B0A', strokeWidth: 3 }, // 默認(rèn)懸停樣式 默認(rèn)為null ConnectionOverlays: [ // 此處可以設(shè)置所有箭頭的樣式 ['Arrow', { // 設(shè)置參數(shù)可以參考中文文檔 location: 1, length: 12, paintStyle: { stroke: '#999', fill: '#999' } }] ], Connector: ['Straight'], // 要使用的默認(rèn)連接器的類(lèi)型:直線,折線,曲線等 DrapOptions: {cursor: 'crosshair', zIndex: 2000} }); this.jsPlumb.batch(() => { for(let i = 0; i < this.leftList.length; i++){ this.initLeaf(this.leftList[i].nodeId, 'source'); } for(let j = 0; j < this.rightList.length; j++){ this.initLeaf(this.rightList[j].nodeId , 'target') } }) this.setjsPlumb(true,true); //點(diǎn)擊連線 this.jsPlumb.bind('click', (conn, originalEvent) => { console.log(conn, originalEvent) }) //連線時(shí)觸發(fā) this.jsPlumb.bind('connection', (conn, originalEvent) => { console.log(conn.sourceId) console.log(conn.targetId) }) //右鍵觸發(fā) this.jsPlumb.bind('contextmenu', (conn, originalEvent) => { console.log(conn, originalEvent) }) }, // 初始化規(guī)則使其可以連線、拖拽 initLeaf(id, type) { const ins = this.jsPlumb; const elem = document.getElementById(id); if (type === 'source') { ins.makeSource(elem, { anchor: [1, 0.5, 0, 0], // 左 上 右 下 allowLoopback: false, //允許回連 maxConnections: -1 //最大連接數(shù)(-1表示不限制) }) } else { ins.makeTarget(elem, { anchor: [0, 0.5, 0, 0], allowLoopback: false, maxConnections: -1 }) } }, setjsPlumb(sourceFlag, targetFlag){ const source = document.getElementsByName('source') const target = document.getElementsByName('target') this.jsPlumb.setSourceEnabled(source, sourceFlag) this.jsPlumb.setTargetEnabled(target, targetFlag) this.jsPlumb.setDraggable(source, false) // 是否支持拖拽 this.jsPlumb.setDraggable(target, false) // 是否支持拖拽 }, } } </script> <style> #container{ width: 500px; height: 500px; padding: 20px; position: relative; /*一定加上這句,否則連線位置發(fā)生錯(cuò)亂*/ } .left{ float: left; width: 150px; } .right{ float: right; width: 150px; } .left li,.right li{ width: 100%; border-radius: 4px; border: 1px solid #ccc; background: #efefef; margin-bottom: 20px; padding: 8px 5px; } </style>
以上是“vue+jsplumb如何實(shí)現(xiàn)連線繪圖”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。