【vue2+antvx6】vue节点高度改变，连接桩跟着改变

在Vue中使用AntV X6时，如果需要在改变节点高度的同时保持连接桩（ports）的位置不变，可以通过监听节点高度的变化并更新节点的位置来实现。

以下是一个简单的例子，展示了如何在Vue组件中实现这一功能：

<template>
  <div ref="x6Container" style="height: 400px;"></div>
</template>
 
<script>
import { Graph } from '@antv/x6'
 
export default {
  data() {
    return {
      graph: null,
    }
  },
  mounted() {
    this.graph = new Graph({
      container: this.$refs.x6Container,
      // ...其他配置
    })
 
    // 初始化一个节点
    const node = this.graph.addNode({
      x: 100,
      y: 40,
      width: 100,
      height: 40, // 初始高度
      ports: [
        // 定义连接桩
        { id: 'port1', group: 'top' },
        { id: 'port2', group: 'bottom' },
      ],
      // ...其他属性
    })
 
    // 监听节点高度的变化
    node.on('change:height', ({ current }) => {
      // 更新连接桩的位置
      const ports = node.getPorts()
      ports.forEach((port) => {
        const position = port.getPosition()
        if (port.options.group === 'top') {
          port.setPosition(position.x, current.height / 2)
        } else if (port.options.group === 'bottom') {
          port.setPosition(position.x, -current.height / 2)
        }
      })
    })
 
    // 改变节点高度的示例
    setTimeout(() => {
      node.setAttrs({
        height: 80, // 设置新的高度
      })
    }, 2000)
  },
}
</script>

在这个例子中，我们首先创建了一个节点并定义了两个连接桩，分别位于顶部和底部。然后我们监听节点高度的变化事件 change:height，在事件处理函数中根据新的高度更新连接桩的位置。当我们在两秒后通过 setAttrs 方法改变节点的高度时，连接桩会保持在顶部和底部，不会被推动出节点边界。