效果
![](https://img2024.cnblogs.com/blog/724275/202404/724275-20240429002357914-1456321320.png)
代码
<template>
<div class="app">
<div ref="myholder" id="paper"></div>
</div>
</template>
<script>
import * as joint from '@joint/core'
export default {
data() {
return {
graph: null,
}
},
mounted() {
const namespace = joint.shapes
var graph = new joint.dia.Graph({}, { cellNamespace: namespace })
this.graph = graph
var paper = new joint.dia.Paper({
el: this.$refs.myholder,
model: this.graph,
width: 600,
height: 300,
cellViewNamespace: namespace,
drawGrid: true,
gridSize: 10,
background: {
color: 'rgba(0, 255, 0, 0.3)',
},
})
const node1 = this.drawRect({ x: 100, y: 30 }, 'Hello')
const node2 = this.drawRect({ x: 250, y: 30 }, 'World!')
const node3 = this.drawRect({ x: 250, y: 100 }, '哈哈哈')
this.drawLine(node1, node2)
this.drawLine(node1, node3)
},
methods: {
drawRect({ x, y }, text) {
var rect = new joint.shapes.standard.Rectangle()
rect.position(x, y)
rect.resize(100, 40)
rect.attr({
body: {
// 填充色
fill: '#2c3e50',
// 圆角x的半径
rx: 10,
ry: 10,
// 边框宽度
// strokeWidth: 0,
// 虚线样式
strokeDasharray: '10,5',
},
label: {
text,
// 字体样式
fill: '#3498DB',
fontSize: 18,
fontWeight: 'bold',
fontVariant: 'Microsoft YaHei',
},
})
rect.addTo(this.graph)
return rect
},
drawLine(node1, node2) {
var link = new joint.shapes.standard.Link()
link.source(node1)
link.target(node2)
link.addTo(this.graph)
},
},
}
</script>
<style lang="less" scoped>
#paper {
border: 1px solid;
}
</style>