vue3.x 使用jsplumb實(shí)現(xiàn)拖拽連線
本文實(shí)例為大家分享了vue3.x 使用jsplumb實(shí)現(xiàn)拖拽連線的具體代碼,供大家參考,具體內(nèi)容如下
如果想在vue2里面使用jsplumb 可以查看 文章,下面講解如何在vue3.x 里面使用jsplumb進(jìn)行拖拽連線
1、安裝
npm install --save jsplumb
2、引入
<script lang="ts" setup> ? import {ref, reactive,onMounted} from 'vue' ? import jsPlumb from 'jsplumb' </script>
3、使用
<template> ? <h3>jsplumb使用</h3> ? <div id="container"> ? ? ? ? <div class="col1"> ? ? ? ? ? ? <div v-for="item in list1" :key="item.nodeId" :id="item.nodeId" name="joint">{{ item.name }}</div> ? ? ? ? </div> ? ? ? ? <div class="col2"> ? ? ? ? ? ? <div v-for="item in list2" :key="item.nodeId" :id="item.nodeId" name="data">{{ item.name }}</div> ? ? ? ? </div> ? ? </div> </template> <script lang="ts" setup> ? import {ref, reactive,onMounted} from 'vue' ? import jsPlumb from 'jsplumb' ? ? //jsplumb使用 ? ? let $jsPlumb = jsPlumb.jsPlumb; ? ? let jsPlumb_instance = null; // 緩存實(shí)例化的jsplumb對(duì)象 ? ? //模型軸 ? ? const list1 = reactive([ ? ? ? ? {name: "name1", nodeId: "name1", axis: '', type:''}, ? ? ? ? {name: "name2", nodeId: "name2", axis: '', type:''}, ? ? ? ? {name: "name3", nodeId: "name3", axis: '', type:''}, ? ? ? ? {name: "name4", nodeId: "name4", axis: '', type:''}, ? ? ? ? {name: "name5", nodeId: "name5", axis: '', type:''}, ? ? ? ? {name: "name6", nodeId: "name6", axis: '', type:''} ? ? ]); ? ? //接口數(shù)據(jù)點(diǎn) ? ? const list2 = reactive([ ? ? ? ? {name: '數(shù)據(jù)1', nodeId: 'data1'}, ? ? ? ? {name: '數(shù)據(jù)2', nodeId: 'data2'}, ? ? ? ? {name: '數(shù)據(jù)3', nodeId: 'data3'}, ? ? ? ? {name: '數(shù)據(jù)4', nodeId: 'data4'}, ? ? ? ? {name: '數(shù)據(jù)5', nodeId: 'data5'}, ? ? ? ? {name: '數(shù)據(jù)6', nodeId: 'data6'} ? ? ]); ? ? onMounted(()=>{ ? ? ? ? showPlumb(); ? ? }) ? ? const showPlumb = ()=> { ? ? ? ? jsPlumb_instance = $jsPlumb.getInstance({ ? ? ? ? ? ? Container: 'container', // 選擇器id ? ? ? ? ? ? EndpointStyle: {radius: 0.11, fill: '#fff'}, // 端點(diǎn)樣式 ? ? ? ? ? ? PaintStyle: {stroke: '#000', strokeWidth: 2}, // 繪畫樣式,默認(rèn)8px線寬 ?#456 ? ? ? ? ? ? HoverPaintStyle: {stroke: '#1E90FF'}, // 默認(rèn)懸停樣式 ?默認(rèn)為null ? ? ? ? ? ? ConnectionOverlays: [ // 此處可以設(shè)置所有箭頭的樣式,因?yàn)槲覀円淖冞B接線的樣式,故單獨(dú)配置 ? ? ? ? ? ? ? ? ['Arrow', { // 設(shè)置參數(shù)可以參考中文文檔 ? ? ? ? ? ? ? ? ? ? location: 1, ? ? ? ? ? ? ? ? ? ? length: 10, ? ? ? ? ? ? ? ? ? ? paintStyle: { ? ? ? ? ? ? ? ? ? ? ? ? stroke: '#000', ? ? ? ? ? ? ? ? ? ? ? ? fill: '#000' ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }] ? ? ? ? ? ? ], ? ? ? ? ? ? Connector: ['Straight'], // 要使用的默認(rèn)連接器的類型:直線,折線,曲線等 ? ? ? ? ? ? DrapOptions: {cursor: 'crosshair', zIndex: 2000} ? ? ? ? },) ? ? ? ? console.log(jsPlumb_instance) ? ? ? ? jsPlumb_instance.batch(() => { ? ? ? ? ? ? for (let i = 0; i < list1.length; i++) { ? ? ? ? ? ? ? ? initLeaf(list1[i].nodeId, 'joint') ? ? ? ? ? ? } ? ? ? ? ? ? for (let i = 0; i < list2.length; i++) { ? ? ? ? ? ? ? ? initLeaf(list2[i].nodeId, 'data') ? ? ? ? ? ? } ? ? ? ? }) ? ? ? ? const joint = document.getElementsByName('joint') ? ? ? ? const data = document.getElementsByName('data') ? ? ? ? jsPlumb_instance.setSourceEnabled(joint, true) ? ? ? ? jsPlumb_instance.setTargetEnabled(data, true) ? ? ? ? jsPlumb_instance.setDraggable(joint, false) // 是否支持拖拽 ? ? ? ? jsPlumb_instance.setDraggable(data, false) // 是否支持拖拽 ? ? ? ? jsPlumb_instance.bind('click', ?(conn, originalEvent) => { ? ? ? ? ? ? jsPlumb_instance.deleteConnection(conn) ? ? ? ? }) ? ? } ? ? // 初始化具體節(jié)點(diǎn) ? ? const initLeaf = (id, type)=> { ? ? ? ? const ins = jsPlumb_instance; ? ? ? ? const elem = document.getElementById(id) ? ? ? ? if (type == 'joint') { ? ? ? ? ? ? ins.makeSource(elem, { ? ? ? ? ? ? ? ? anchor: [1, 0.5, 0, 0], // 左 上 右 下 ? ? ? ? ? ? ? ? allowLoopback: false, ? ? ? ? ? ? ? ? maxConnections: 1 ? ? ? ? ? ? }) ? ? ? ? } else { ? ? ? ? ? ? ins.makeTarget(elem, { ? ? ? ? ? ? ? ? anchor: [0, 0.5, 0, 0], ? ? ? ? ? ? ? ? allowLoopback: false, ? ? ? ? ? ? ? ? maxConnections: 1 ? ? ? ? ? ? }) ? ? ? ? } ? ? } </script> <style scoped lang="less"> ?#container { ? ? position: relative; ? ? ? margin-top: 20px; ? ? ? width: 100%; ? ? ? height: 300px; ? } ? .col2, .col1 { ? ? ? float: left; ? ? ? text-align: center; ? } ? .col1 { ? ? ? width: 80px; ? } ? .col2 { ? ? ? width: 120px; ? ? ? margin-left: 80px; ? } ? #container > div > div { ? ? ? line-height: 30px; ? ? ? margin: 0 0 17px 0; ? ? ? background: #ef631e; ? ? ? color: #fff; ? } </style>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例
這篇文章主要為大家介紹了Element?Table行的動(dòng)態(tài)合并及數(shù)據(jù)編輯示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能
這篇文章主要介紹了Vue基于iview實(shí)現(xiàn)登錄密碼的顯示與隱藏功能,本文通過(guò)截圖實(shí)例代碼說(shuō)明給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載
學(xué)了vue寫項(xiàng)目這么久,忽然發(fā)現(xiàn)路由懶加載的寫法,節(jié)省了加載所有路由的時(shí)間。本文主要介紹了vue3.0+vite2實(shí)現(xiàn)動(dòng)態(tài)異步組件懶加載,感興趣的可以了解一下2021-06-06基于vue3?vue-cli4?線上部署及優(yōu)化的問(wèn)題
這篇文章主要介紹了基于vue3?vue-cli4?線上部署及優(yōu)化的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06前端Vue?select下拉框使用以及監(jiān)聽(tīng)事件詳解
由于前端項(xiàng)目使用的是Vue.js和bootstrap整合開發(fā),中間用到了select下拉框,這篇文章主要給大家介紹了關(guān)于前端Vue?select下拉框使用以及監(jiān)聽(tīng)事件的相關(guān)資料,需要的朋友可以參考下2024-03-03