coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-21 18:37:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Doc: update

Browse Source
This commit is contained in:
wanglin2 2023-06-26 10:32:36 +08:00
parent 7289b3a0ad
commit 66c9805efc
7 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

File diff suppressed because one or more lines are too long

2
web/src/pages/Doc/en/start/index.md
View File

@ -77,7 +77,7 @@ If you need a file in the format of `umd` module, such as `CDN` in the browser,
<script scr="simpleMindMap.umd.min.js"></script>
```
A global variable `window.simpleMindMap` will be created.
A global variable `window.simpleMindMap` will be created. you can get `MindMap` constructor by `window.simpleMindMap.default`, for more detail info you can log `window.simpleMindMap`.
The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.

2
web/src/pages/Doc/en/start/index.vue
View File

@ -57,7 +57,7 @@ compile this dependency:</p>
<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>A global variable <code>window.simpleMindMap</code> will be created.</p>
<p>A global variable <code>window.simpleMindMap</code> will be created. you can get <code>MindMap</code> constructor by <code>window.simpleMindMap.default</code>, for more detail info you can log <code>window.simpleMindMap</code>.</p>
<p>The disadvantage of this method is that it will contain all the content, including the plugins you have not registered, so the overall volume will be relatively large.</p>
<p>（v0.5.4+）If you want to use the <code>ES</code> module directly on the browser side, you can find the <code>simpleMindMap.esm.js</code> and <code>simpleMindMap.esm.css</code> files in the <code>/simple-mind-map/dist/</code> directory.</p>
<h2>Development</h2>

7
web/src/pages/Doc/zh/course20/index.md
View File

@ -2,7 +2,7 @@
> 该特性v0.6.3+版本支持
如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入一下选项：
如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入以下选项：
```js
new MindMap({
@ -23,6 +23,8 @@ node.nodeData.data
`customCreateNodeContent`方法需要返回`DOM`节点，如果某个节点你不想自定义，那么可以返回`null`，那么还是会走内置的节点渲染逻辑。
返回的`DOM`节点的宽高需要是确定的，如果是动态的那么会导致宽高获取错误，最终导致节点定位错误和发生重叠等问题。
如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
## 示例1：渲染自定义DOM节点
@ -112,3 +114,6 @@ import CustomNodeContent from './CustomNodeContent.vue'
}
```
## 示例4：渲染react组件
如果你成功渲染了`react`组件，欢迎[提交](https://github.com/wanglin2/mind-map/issues/new)示例代码给我~

5
web/src/pages/Doc/zh/course20/index.vue
View File

@ -4,7 +4,7 @@
<blockquote>
<p>该特性v0.6.3+版本支持</p>
</blockquote>
<p>如果你想自定义节点的内容，那么可以在实例化<code>simple-mind-map</code>时传入一下选项：</p>
<p>如果你想自定义节点的内容，那么可以在实例化<code>simple-mind-map</code>时传入以下选项：</p>
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
<span class="hljs-attr">isUseCustomNodeContent</span>: <span class="hljs-literal">true</span>,
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =&gt;</span> {
@ -17,6 +17,7 @@
</code></pre>
<p>其他节点实例属性你可以自行打印出来看看。</p>
<p><code>customCreateNodeContent</code>方法需要返回<code>DOM</code>节点，如果某个节点你不想自定义，那么可以返回<code>null</code>，那么还是会走内置的节点渲染逻辑。</p>
<p>返回的<code>DOM</code>节点的宽高需要是确定的，如果是动态的那么会导致宽高获取错误，最终导致节点定位错误和发生重叠等问题。</p>
<p>如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。</p>
<h2>示例1：渲染自定义DOM节点</h2>
<pre class="hljs"><code>{
@ -92,6 +93,8 @@
}
}
</code></pre>
<h2>示例4：渲染react组件</h2>
<p>如果你成功渲染了<code>react</code>组件，欢迎<a href="https://github.com/wanglin2/mind-map/issues/new">提交</a>示例代码给我~</p>
</div>
</template>

2
web/src/pages/Doc/zh/start/index.md
View File

@ -72,7 +72,7 @@ const mindMap = new MindMap({
<script scr="simpleMindMap.umd.min.js"></script>
```
会创建一个全局变量`window.simpleMindMap`。
会创建一个全局变量`window.simpleMindMap`，可以通过`window.simpleMindMap.default`获取到`MindMap`构造函数，详细信息可以把`window.simpleMindMap`打印出来看一下。
这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。

2
web/src/pages/Doc/zh/start/index.vue
View File

@ -51,7 +51,7 @@
<pre class="hljs"><code><span class="hljs-tag">&lt;<span class="hljs-name">link</span> <span class="hljs-attr">rel</span>=<span class="hljs-string">&quot;stylesheet&quot;</span> <span class="hljs-attr">href</span>=<span class="hljs-string">&quot;simpleMindMap.css&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">scr</span>=<span class="hljs-string">&quot;simpleMindMap.umd.min.js&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</code></pre>
<p>会创建一个全局变量<code>window.simpleMindMap</code>。</p>
<p>会创建一个全局变量<code>window.simpleMindMap</code>，可以通过<code>window.simpleMindMap.default</code>获取到<code>MindMap</code>构造函数，详细信息可以把<code>window.simpleMindMap</code>打印出来看一下。</p>
<p>这种方式的缺点是会包含所有的内容，包括你没有注册的插件，所以整体体积会比较大。</p>
<p>（v0.5.4+）如果你想直接在浏览器端通过<code>ES</code>模块的方式来使用，你可以在<code>/simple-mind-map/dist/</code>目录中找到<code>simpleMindMap.esm.js</code>和<code>simpleMindMap.esm.css</code>文件。</p>
<h2>开发</h2>