diff --git a/index.html b/index.html index ffed24e8..f6177d2c 100644 --- a/index.html +++ b/index.html @@ -1 +1 @@ -一个简单的web思维导图实现
\ No newline at end of file +一个简单的web思维导图实现
\ No newline at end of file diff --git a/web/src/pages/Doc/zh/course20/index.md b/web/src/pages/Doc/zh/course20/index.md index 09a30210..bbe61ec4 100644 --- a/web/src/pages/Doc/zh/course20/index.md +++ b/web/src/pages/Doc/zh/course20/index.md @@ -37,7 +37,7 @@ node.nodeData.data

我是自定义节点

${ node.nodeData.text } ` - return dev + return div } } ``` @@ -96,3 +96,19 @@ import i18n from './i18n' ## 示例3：渲染Vue3组件 +```js +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 + } +} +``` + diff --git a/web/src/pages/Doc/zh/course20/index.vue b/web/src/pages/Doc/zh/course20/index.vue index 8b0f6592..482e42ae 100644 --- a/web/src/pages/Doc/zh/course20/index.vue +++ b/web/src/pages/Doc/zh/course20/index.vue @@ -28,7 +28,7 @@ <h1>我是自定义节点</h1> ${ node.nodeData.text } ` - return dev + return div } } @@ -78,6 +78,20 @@ }

示例3：渲染Vue3组件

+
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
+    }
+}
+
diff --git a/web/src/pages/Edit/components/Edit.vue b/web/src/pages/Edit/components/Edit.vue index 52a80066..ad6402a0 100644 --- a/web/src/pages/Edit/components/Edit.vue +++ b/web/src/pages/Edit/components/Edit.vue @@ -300,7 +300,7 @@ export default { ...(config || {}), iconList: icon, useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag, - isUseCustomNodeContent: false, + // isUseCustomNodeContent: true, // 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西 // customCreateNodeContent: (node) => { // let el = document.createElement('div')