2.x中自定义vue节点没有渲染attrs/label/text中的文字内容

[oyal]

问题描述

同样的代码 1.x 可以渲染文字内容，渲染的 html 结构是这样的

<foreignObject width="80" height="40">xxxx</foreignObject>
<text font-size="12" fill="#333" text-anchor="middle" transform="matrix(1,0,0,1,40,20)" xml:space="preserve"><tspan dy="0.3em" class="v-line">my-shape</tspan></text>

2.x 中没有渲染 text 标签

重现链接

https://codesandbox.io/s/youthful-hofstadter-41c8v0?file=/src/App.vue

重现步骤

1.自定义vue组件 2.注册 3.使用 graph.addNode 添加，text 并没有渲染出来

graph.addNode({
  shape: 'my-shape',
  x: 40,
  y: 40,
  width: 80,
  height: 40,
  attrs: {
    label: {
      text: 'my-shape',
      fontSize: 12,
      fill: '#333'
    }
  }
})

预期行为

期望正常渲染 attrs/label/text 中的文字内容

平台

• 操作系统: Windows
• 网页浏览器: Google Chrome
• X6 版本: 2.5.3
• @antv/x6-vue-shape: 2.0.9

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[NewByVector]

如果是 vue 节点，节点内容完全由 vue 组件渲染，其实就不需要 label 了。你需要渲染 label 的场景是什么呢？

[oyal]

如果是 vue 节点，节点内容完全由 vue 组件渲染，其实就不需要 label 了。你需要渲染 label 的场景是什么呢？

我是由1.0升级到2.0的，之前的节点名称是通过label来渲染的，可以很方便的通过修改label的名称、颜色、大小

升级到2.0后，如果把名称写到vue组件里（node.attr('label/text')），修改attrs无法动态渲染 我目前是这样解决的：在组件里捕获事件node.on('change:attrs', ..)，然后再给文本标签改变文字、颜色大小等，增加了一点升级负担

[NewByVector]

@oyal 你后面的处理方式扩展性更好，因为往往后续需求中会往节点增加很多内容(不只是 label)，我们可以将业务数据都放在节点 data 中，然后统一在节点内部监听 data:changed 事件，然后更新渲染。

[x6-bot[bot]]

This thread has been automatically locked because it has not had recent activity.

Please open a new issue for related bugs and link to relevant comments in this thread.