为什么出现这个问题:因为官方文档是基于1.34.6版本的,我们只需要安装跟官方文档一样的版本就可以了
解决方法:npm install --save @antv/x6@1.34.6
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import { Graph } from '@antv/x6';
export default {
mounted() {
const graph = new Graph({
container: document.getElementById('container'),
width: 800,
height: 600,
});
const source = graph.addNode({
x: 40,
y: 40,
width: 100,
height: 40,
shape: 'html',
html() {
const wrap = document.createElement('div')
wrap.style.width = '90%'
wrap.style.height = '100%'
wrap.style.background = '#f0f0f0'
wrap.style.display = 'flex'
wrap.style.justifyContent = 'center'
wrap.style.alignItems = 'center'
wrap.innerText = 'Hello'
return wrap
},
})
const wrap = document.createElement('div')
wrap.style.width = '100%'
wrap.style.height = '100%'
wrap.style.background = '#f0f0f0'
wrap.style.display = 'flex'
wrap.style.justifyContent = 'center'
wrap.style.alignItems = 'center'
wrap.innerText = 'World'
const target = graph.addNode({
x: 180,
y: 160,
width: 100,
height: 40,
})
graph.addEdge({
source,
target,
})
}
}
</script>