From 98d28a7b6700376ef40ecfed68911d8ef35f4dd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=A1=97=E8=A7=92=E5=B0=8F=E6=9E=97?= <1013335014@qq.com>
Date: Tue, 7 May 2024 09:33:21 +0800
Subject: [PATCH] Doc: update
---
web/src/pages/Doc/catalogList.js | 2 +-
web/src/pages/Doc/routerList.js | 1 +
web/src/pages/Doc/zh/course28/index.md | 50 +++++++++++++++++++++++
web/src/pages/Doc/zh/course28/index.vue | 54 +++++++++++++++++++++++++
web/src/pages/Doc/zh/course3/index.md | 43 ++++++++++++++++++++
web/src/pages/Doc/zh/course3/index.vue | 28 +++++++++++++
6 files changed, 177 insertions(+), 1 deletion(-)
create mode 100644 web/src/pages/Doc/zh/course28/index.md
create mode 100644 web/src/pages/Doc/zh/course28/index.vue
diff --git a/web/src/pages/Doc/catalogList.js b/web/src/pages/Doc/catalogList.js
index 70f7dd79..947e1529 100644
--- a/web/src/pages/Doc/catalogList.js
+++ b/web/src/pages/Doc/catalogList.js
@@ -11,7 +11,7 @@ let langList = [
}
]
let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
-let CourseList = new Array(27).fill(0).map((_, index) => {
+let CourseList = new Array(28).fill(0).map((_, index) => {
return 'course' + (index + 1)
})
let APIList = [
diff --git a/web/src/pages/Doc/routerList.js b/web/src/pages/Doc/routerList.js
index b97f2793..c674b703 100644
--- a/web/src/pages/Doc/routerList.js
+++ b/web/src/pages/Doc/routerList.js
@@ -34,6 +34,7 @@ export default [
{ path: 'course25', title: '关于概要' },
{ path: 'course26', title: '如何实现AI生成节点内容' },
{ path: 'course27', title: '快捷键操作如何传递自定义参数' },
+ { path: 'course28', title: '如何动态修改自定义元素的大小' },
{ path: 'doExport', title: 'Export 插件' },
{ path: 'drag', title: 'Drag插件' },
{ path: 'introduction', title: '简介' },
diff --git a/web/src/pages/Doc/zh/course28/index.md b/web/src/pages/Doc/zh/course28/index.md
new file mode 100644
index 00000000..10030b44
--- /dev/null
+++ b/web/src/pages/Doc/zh/course28/index.md
@@ -0,0 +1,50 @@
+# 如何动态修改自定义元素的大小
+
+自定义节点大小不会随着自定义元素大小改变而自动改变，如果有动态修改自定义节点内容大小的需求，比如展开收起一部分内容，目前可以尝试如下做法：
+
+1.控制节点大小的字段必须是节点数据中的一个字段，否则重新渲染时节点重新创建大小又会恢复最初的大小：
+
+```js
+new MindMap({
+ isUseCustomNodeContent: true,
+ customCreateNodeContent: node => {
+ let el = document.createElement('div')
+ const _expand = node.nodeData.data._expand
+ el.style.background = '#000'
+ el.style.width = '100px'
+ el.style.height = _expand ? '100px' : '50px'
+ return el
+ }
+})
+```
+
+可以给节点数据添加一个自定义字段，比如`_expand`，然后通过这个字段来控制自定义元素的大小。
+
+2.点击自定义节点内容切换大小时需要修改节点数据，然后调用渲染方法：
+
+```js
+new MindMap({
+ isUseCustomNodeContent: true,
+ customCreateNodeContent: node => {
+ const el = document.createElement('div')
+ const _expand = node.nodeData.data._expand
+ el.style.background = '#000'
+ el.style.width = '100px'
+ el.style.height = _expand ? '100px' : '50px'
+ el.addEventListener('click', () => {
+ node.setData({
+ resetRichText: true,
+ _expand: !_expand
+ })
+ this.mindMap.render()
+ })
+ return el
+ }
+})
+```
+
+注意其中的`resetRichText`字段必须设置为`true`，否则不会触发渲染。
+
+### 完整示例
+
+
diff --git a/web/src/pages/Doc/zh/course28/index.vue b/web/src/pages/Doc/zh/course28/index.vue
new file mode 100644
index 00000000..27168cd5
--- /dev/null
+++ b/web/src/pages/Doc/zh/course28/index.vue
@@ -0,0 +1,54 @@
+
+
+
如何动态修改自定义元素的大小
+
自定义节点大小不会随着自定义元素大小改变而自动改变，如果有动态修改自定义节点内容大小的需求，比如展开收起一部分内容，目前可以尝试如下做法：
+
1.控制节点大小的字段必须是节点数据中的一个字段，否则重新渲染时节点重新创建大小又会恢复最初的大小：
+
new MindMap({
+ isUseCustomNodeContent: true,
+ customCreateNodeContent: node => {
+ let el = document.createElement('div')
+ const _expand = node.nodeData.data._expand
+ el.style.background = '#000'
+ el.style.width = '100px'
+ el.style.height = _expand ? '100px' : '50px'
+ return el
+ }
+})
+
+
可以给节点数据添加一个自定义字段，比如_expand，然后通过这个字段来控制自定义元素的大小。
+
2.点击自定义节点内容切换大小时需要修改节点数据，然后调用渲染方法：
+
new MindMap({
+ isUseCustomNodeContent: true,
+ customCreateNodeContent: node => {
+ const el = document.createElement('div')
+ const _expand = node.nodeData.data._expand
+ el.style.background = '#000'
+ el.style.width = '100px'
+ el.style.height = _expand ? '100px' : '50px'
+ el.addEventListener('click', () => {
+ node.setData({
+ resetRichText: true,
+ _expand: !_expand
+ })
+ this.mindMap.render()
+ })
+ return el
+ }
+})
+
+
注意其中的resetRichText字段必须设置为true，否则不会触发渲染。
+
完整示例
+
+
+
插入节点的命令也可以传入一定参数，比如创建新节点不想直接进入新节点的编辑模式，那么可以这样调用：
+mindMap.execCommand('INSERT_CHILD_NODE', false)
+
+如果想给指定的节点插入新节点，而不是当前激活的节点，那么就可以通过第二个参数：
+mindMap.execCommand('INSERT_CHILD_NODE', false, [node])
+
+参数是通过平铺的列表方式传递的，所以前面的参数都不能省略。
+如果要指定创建的新节点的一些数据，那么可以通过第三个参数：
+mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
+ uid: '指定uid',
+ text: '指定初始文本'
+})
+
+最后一个参数可以指定创建新节点的子节点：
+mindMap.execCommand('INSERT_CHILD_NODE', false, [], {
+ uid: '指定uid',
+ text: '指定初始文本'
+}, [
+ {
+ data: {
+ text: '下级节点'
+ },
+ children: []
+ }
+])
+
+注意传递的是完整的节点结构数据。
+其他命令也是类似的，详细可以参考api文档。
插入多个子节点
如果你要同时插入多个子节点，那么可以执行INSERT_MULTI_CHILD_NODE命令：
mindMap.execCommand('INSERT_MULTI_CHILD_NODE', [], childList)