使用 Vue 2 和 jsPlumb 实现绘制流程图并具备连线箭头和拖拽功能,可以按照以下步骤进行:
1. 安装 jsPlumb
首先,确保你已经在项目中安装了 jsPlumb
。如果还没有安装,可以通过 npm 或直接引入 CDN。
npm install jsplumb --save
或者在 HTML 文件中直接引入:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsplumb/2.15.6/jsplumb.min.js"></script>
2. 创建基本的 Vue 组件
在你的 Vue 项目中创建一个组件,比如 FlowChart.vue
:
<template>
<div id="flowchart" ref="flowchart" class="flowchart">
<div
v-for="(node, index) in nodes"
:key="index"
class="node"
:style="{ left: node.x + 'px', top: node.y + 'px' }"
@mousedown="startDrag(node)"
>
{{ node.label }}
<div class="port" @click.stop.prevent="addConnection(index)"></div>
</div>
</div>
</template>
<script>
import { jsPlumb } from "jsplumb";
export default {
data() {
return {
nodes: [
{ label: "Node 1", x: 100, y: 100 },
{ label: "Node 2", x: 300, y: 100 }
],
isDragging: false,
currentDraggedNode: null,
};
},
mounted() {
this.initJsPlumb();
this.makeDraggable();
},
methods: {
initJsPlumb() {
jsPlumb.ready(() => {
this.instance = jsPlumb.getInstance({
Container: "flowchart",
});
// 添加连接线的样式
this.instance.bind("connection", (conn) => {
conn.getOverlay("label").setLabel("Connection");
});
// 初始化节点连接
this.nodes.forEach((node, index) => {
this.instance.addEndpoint(`node_${index}`, { anchor:"Continuous" }, { uuid:`port_${index}` });
});
});
},
makeDraggable() {
const nodes = document.querySelectorAll('.node');
nodes.forEach(node => {
node.draggable = true;
node.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
this.isDragging = true;
this.currentDraggedNode = e.target;
});
node.addEventListener('dragend', () => {
this.isDragging = false;
this.currentDraggedNode = null;
});
node.addEventListener('dragover', (e) => e.preventDefault());
node.addEventListener('drop', (e) => {
if (this.isDragging && this.currentDraggedNode) {
const draggedIndex = parseInt(this.currentDraggedNode.dataset.index);
const targetIndex = parseInt(e.target.dataset.index);
// Update positions or logic for dropping can go here
console.log(`Dropped ${draggedIndex} on ${targetIndex}`);
}
e.preventDefault();
});
});
},
addConnection(nodeIndex) {
const endpointUUID = `port_${nodeIndex}`;
const connectionSourceId = prompt("Enter source node ID:");
if(connectionSourceId){
this.instance.connect({
source:endpointUUID,
target:`port_${connectionSourceId}`,
overlays:[["Arrow", { width:10, length:10, location:1 }]]
});
}
}
}
</script>
<style scoped>
.flowchart {
position: relative;
width: 600px;
height: 400px;
border: solid 1px #ccc;
}
.node{
position:absolute;
padding :10px;
border :solid black .5px;
background-color:white;
cursor:pointer;
}
.port{
width :10px;
height :10px;
background-color:red;
}
</style>
3. 使用组件
在你的主应用或其他组件中使用这个新的 FlowChart
:
<template>
<div id="app">
<FlowChart />
</div>
</template>
<script>
import FlowChart from './components/FlowChart.vue'
export default {
components:{
FlowChart,
}
}
</script>
小结
以上代码提供了一个简单的实现,用于创建可拖拽的节点,并允许它们之间建立连接。你可以根据自己的需求扩展和调整功能,例如添加更多节点、更新节点的位置、持久化数据等。请根据项目需求做相应的修改和完善。
内容由零声教学AI助手提供,问题来源于学员提问