该特性v0.6.3+版本支持
如果你想自定义节点的内容，那么可以在实例化simple-mind-map时传入一下选项：
new MindMap({
isUseCustomNodeContent: true,
customCreateNodeContent: (node) => {
// return你的自定义DOM节点
}
})
customCreateNodeContent方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
node.nodeData.data
其他节点实例属性你可以自行打印出来看看。
customCreateNodeContent方法需要返回DOM节点，如果某个节点你不想自定义，那么可以返回null，那么还是会走内置的节点渲染逻辑。
如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
{
customCreateNodeContent: (node) => {
let div = document.createElement('div')
div.className = 'xxx'
div.style.cssText = `xxx`
div.innerHTML = `
<h1>我是自定义节点</h1>
${ node.nodeData.text }
`
return div
}
}
如果想要使用一个相对简单的Vue组件，那么可以通过如下方式：
import CustomNodeContent from 'CustomNodeContent.vue'
import Vue from 'vue'
{
customCreateNodeContent: (node) => {
let el = document.createElement('div')
let Comp = Vue.extend(CustomNodeContent)
let comp = new Comp({
// props
propsData: {
html: node.nodeData.data.text
}
})
comp.$mount(el)
return comp.$el
}
}
如果你的Vue组件比较复杂，里面用到了vueRouter、vuex、i18n等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
import CustomNodeContent from 'CustomNodeContent.vue'
import Vue from 'vue'
import router from './router'
import store from './store'
import i18n from './i18n'
{
customCreateNodeContent: (node) => {
let el = document.createElement('div')
let Comp = Vue.extend(CustomNodeContent)
let comp = new Comp({
// props
propsData: {
html: node.nodeData.data.text
},
router,
store,
i18n
})
comp.$mount(el)
return comp.$el
}
}
import { createApp } from "vue"
import CustomNodeContent from './CustomNodeContent.vue'
{
customCreateNodeContent: (node) => {
let el = document.createElement('div')
const app = createApp(CustomNodeContent, {// props
html: node.nodeData.data.text
})
app.mount(el)
return el
}
}