我正在使用Vue.js 3和D3.js v7來制作流程圖。
我的問題是我不能在 D3.js 中動態附加組件。
我的組件被匯入如下所示。
components: {
StoryPanel: defineAsyncComponent(() => import("@/Pages/Story/Partials/StoryPanel"))
},
let nodes = container.selectAll("g")
.data(root.descendants())
.join("g")
.append("foreignObject")
.attr("width", entityWidth - 10)
.attr("height", 150)
nodes.append("xhtml:div")
.attr("class", "border border-black")
.html(function (d) {
// return '<StoryPanel />' tried this but not working
})
.style("border", '1px solid black')
這是生成的html
<foreignObject width="190" height="150" transform="translate(-95,10)">
<div class="border border-black" style="border: 1px solid black;">
<storypanel></storypanel>
</div>
</foreignObject>
[編輯 1]按照@MichalLevy 的建議 嘗試將此Rendering Vue 3 組件轉換為 HTML 字串，但仍然無法正常作業
.html(function (d) {
const tempApp = createApp({
render() {
return h(StoryPanel,{step: d})
}
})
const el = document.createElement('div');
const mountedApp = tempApp.mount(el)
return mountedApp.$el.outerHTML
})
[編輯 2]
我發現它僅在使用 const 而不是 a 時才有效Component.vue
const CircleWithTextSvg = {
name: 'CircleWithTextSvg',
props: {
text: {
type: String,
default: "1"
},
fill: {
type: String,
default: "white"
}
},
template: `<div>template</div>`
}
任何幫助表示贊賞。謝謝你。
uj5u.com熱心網友回復：
用 createApp
import {createApp} from 'vue';
并使用它并回傳outerHTML
const app = createApp(Component, {prop1: this.prop1})
.mount(document.createElement('div'))
return app.$el.outerHTML
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/326009.html
上一篇：D3.js將行名附加到它