Doc: update
This commit is contained in:
街角小林
parent
728b1e1503
commit
42c934cb6d
@ -25,33 +25,38 @@
|
|||||||
|
|
||||||
```js
|
```js
|
||||||
{
|
{
|
||||||
data: {
|
data: {
|
||||||
// 节点文本
|
text: '', // 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true
|
||||||
text: '根节点',
|
richText: false, // 节点的文本是否是富文本模式
|
||||||
// 图片
|
expand: true, // 节点是否展开
|
||||||
image: 'xxx.jpg',
|
uid: '',// 节点唯一的id，可不传，内部会生成
|
||||||
imageTitle: '图片名称',
|
icon: [], // 图标，格式可参考教程里的【插入和扩展节点图标】章节
|
||||||
imageSize: {
|
image: '', // 图片的url
|
||||||
width: 1152,
|
imageTitle: '', // 图片的标题，可为空
|
||||||
height: 1152
|
imageSize: { // 图片的尺寸
|
||||||
},
|
width: 100, // 图片的宽度，必传
|
||||||
// 图标
|
height: 100, // 图片的高度，必传
|
||||||
icon: ['priority_1'],
|
custom: false // 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准
|
||||||
// 标签
|
|
||||||
tag: ['标签1', '标签2'],
|
|
||||||
// 链接
|
|
||||||
hyperlink: 'http://lxqnsys.com/',
|
|
||||||
hyperlinkTitle: '理想青年实验室',
|
|
||||||
// 备注内容
|
|
||||||
note: '理想青年实验室\n一个有意思的角落',
|
|
||||||
// 概要
|
|
||||||
generalization: {
|
|
||||||
text: '概要的内容'
|
|
||||||
},
|
|
||||||
// 节点是否展开
|
|
||||||
expand: true,
|
|
||||||
},
|
},
|
||||||
children: []// 子节点
|
hyperlink: '', // 超链接地址
|
||||||
|
hyperlinkTitle: '', // 超链接的标题
|
||||||
|
note: '', // 备注的内容
|
||||||
|
attachmentUrl: '',// v0.9.10+，附件url
|
||||||
|
attachmentName: '',// v0.9.10+，附件名称
|
||||||
|
tag: [], // 标签列表
|
||||||
|
generalization: {// 节点的概要，如果没有概要generalization设为null即可
|
||||||
|
text: ''// 概要的文本
|
||||||
|
},
|
||||||
|
associativeLineTargets: [''],// 如果存在关联线，那么为目标节点的uid列表
|
||||||
|
associativeLineText: '',// 关联线文本
|
||||||
|
// ...其他样式字段，可以参考主题
|
||||||
|
},
|
||||||
|
children [// 子节点，结构和根节点一致
|
||||||
|
{
|
||||||
|
data: {},
|
||||||
|
children: []
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|||||||
@ -17,33 +17,38 @@
|
|||||||
<p>这是为了避免节点内的文字因为默认样式而出现偏移。</p>
|
<p>这是为了避免节点内的文字因为默认样式而出现偏移。</p>
|
||||||
<p>一个节点的基本数据结构如下所示：</p>
|
<p>一个节点的基本数据结构如下所示：</p>
|
||||||
<pre class="hljs"><code>{
|
<pre class="hljs"><code>{
|
||||||
<span class="hljs-attr">data</span>: {
|
<span class="hljs-attr">data</span>: {
|
||||||
<span class="hljs-comment">// 节点文本</span>
|
<span class="hljs-attr">text</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 节点的文本，可以是富文本，也就是html格式的，此时richText要设为true</span>
|
||||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'根节点'</span>,
|
<span class="hljs-attr">richText</span>: <span class="hljs-literal">false</span>, <span class="hljs-comment">// 节点的文本是否是富文本模式</span>
|
||||||
<span class="hljs-comment">// 图片</span>
|
<span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>, <span class="hljs-comment">// 节点是否展开</span>
|
||||||
<span class="hljs-attr">image</span>: <span class="hljs-string">'xxx.jpg'</span>,
|
<span class="hljs-attr">uid</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// 节点唯一的id，可不传，内部会生成</span>
|
||||||
<span class="hljs-attr">imageTitle</span>: <span class="hljs-string">'图片名称'</span>,
|
<span class="hljs-attr">icon</span>: [], <span class="hljs-comment">// 图标，格式可参考教程里的【插入和扩展节点图标】章节</span>
|
||||||
<span class="hljs-attr">imageSize</span>: {
|
<span class="hljs-attr">image</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 图片的url</span>
|
||||||
<span class="hljs-attr">width</span>: <span class="hljs-number">1152</span>,
|
<span class="hljs-attr">imageTitle</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 图片的标题，可为空</span>
|
||||||
<span class="hljs-attr">height</span>: <span class="hljs-number">1152</span>
|
<span class="hljs-attr">imageSize</span>: { <span class="hljs-comment">// 图片的尺寸</span>
|
||||||
},
|
<span class="hljs-attr">width</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// 图片的宽度，必传</span>
|
||||||
<span class="hljs-comment">// 图标</span>
|
<span class="hljs-attr">height</span>: <span class="hljs-number">100</span>, <span class="hljs-comment">// 图片的高度，必传</span>
|
||||||
<span class="hljs-attr">icon</span>: [<span class="hljs-string">'priority_1'</span>],
|
<span class="hljs-attr">custom</span>: <span class="hljs-literal">false</span> <span class="hljs-comment">// 如果设为true，图片的显示大小不受主题控制，以imageSize.width和imageSize.height为准</span>
|
||||||
<span class="hljs-comment">// 标签</span>
|
|
||||||
<span class="hljs-attr">tag</span>: [<span class="hljs-string">'标签1'</span>, <span class="hljs-string">'标签2'</span>],
|
|
||||||
<span class="hljs-comment">// 链接</span>
|
|
||||||
<span class="hljs-attr">hyperlink</span>: <span class="hljs-string">'http://lxqnsys.com/'</span>,
|
|
||||||
<span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">'理想青年实验室'</span>,
|
|
||||||
<span class="hljs-comment">// 备注内容</span>
|
|
||||||
<span class="hljs-attr">note</span>: <span class="hljs-string">'理想青年实验室\n一个有意思的角落'</span>,
|
|
||||||
<span class="hljs-comment">// 概要</span>
|
|
||||||
<span class="hljs-attr">generalization</span>: {
|
|
||||||
<span class="hljs-attr">text</span>: <span class="hljs-string">'概要的内容'</span>
|
|
||||||
},
|
|
||||||
<span class="hljs-comment">// 节点是否展开</span>
|
|
||||||
<span class="hljs-attr">expand</span>: <span class="hljs-literal">true</span>,
|
|
||||||
},
|
},
|
||||||
<span class="hljs-attr">children</span>: []<span class="hljs-comment">// 子节点</span>
|
<span class="hljs-attr">hyperlink</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 超链接地址</span>
|
||||||
|
<span class="hljs-attr">hyperlinkTitle</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 超链接的标题</span>
|
||||||
|
<span class="hljs-attr">note</span>: <span class="hljs-string">''</span>, <span class="hljs-comment">// 备注的内容</span>
|
||||||
|
<span class="hljs-attr">attachmentUrl</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// v0.9.10+，附件url</span>
|
||||||
|
<span class="hljs-attr">attachmentName</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// v0.9.10+，附件名称</span>
|
||||||
|
<span class="hljs-attr">tag</span>: [], <span class="hljs-comment">// 标签列表</span>
|
||||||
|
<span class="hljs-attr">generalization</span>: {<span class="hljs-comment">// 节点的概要，如果没有概要generalization设为null即可</span>
|
||||||
|
<span class="hljs-attr">text</span>: <span class="hljs-string">''</span><span class="hljs-comment">// 概要的文本</span>
|
||||||
|
},
|
||||||
|
<span class="hljs-attr">associativeLineTargets</span>: [<span class="hljs-string">''</span>],<span class="hljs-comment">// 如果存在关联线，那么为目标节点的uid列表</span>
|
||||||
|
<span class="hljs-attr">associativeLineText</span>: <span class="hljs-string">''</span>,<span class="hljs-comment">// 关联线文本</span>
|
||||||
|
<span class="hljs-comment">// ...其他样式字段，可以参考主题</span>
|
||||||
|
},
|
||||||
|
children [<span class="hljs-comment">// 子节点，结构和根节点一致</span>
|
||||||
|
{
|
||||||
|
<span class="hljs-attr">data</span>: {},
|
||||||
|
<span class="hljs-attr">children</span>: []
|
||||||
|
}
|
||||||
|
]
|
||||||
}
|
}
|
||||||
</code></pre>
|
</code></pre>
|
||||||
<p><code>icon</code>可以使用内置的图标，完整图标可以在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件中查看。也可以扩展图标，参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course19/%E6%89%A9%E5%B1%95%E5%9B%BE%E6%A0%87">扩展图标</a>。</p>
|
<p><code>icon</code>可以使用内置的图标，完整图标可以在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">icons.js</a>文件中查看。也可以扩展图标，参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/course19/%E6%89%A9%E5%B1%95%E5%9B%BE%E6%A0%87">扩展图标</a>。</p>
|
||||||
|
|||||||
@ -2,6 +2,10 @@
|
|||||||
|
|
||||||
> 节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。
|
> 节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。
|
||||||
|
|
||||||
|
> 另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。
|
||||||
|
|
||||||
|
> 最后要注意这两个功能都需要先注册Drag插件。
|
||||||
|
|
||||||
节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化`simple-mind-map`时传入开启的选项：
|
节点支持自由拖拽，也就是可以把它拖动到你指定的位置，默认是不开启的，如果需要开启可以在实例化`simple-mind-map`时传入开启的选项：
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
|||||||
@ -4,6 +4,12 @@
|
|||||||
<blockquote>
|
<blockquote>
|
||||||
<p>节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。</p>
|
<p>节点自由拖拽的连线可能不会符合你的预期，这个问题基本上不会改，所以自由拖拽功能不建议使用。</p>
|
||||||
</blockquote>
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>另外不要把节点拖拽和自由拖拽搞混，节点拖拽指拖动节点到其他节点上成为其子节点或兄弟节点，自由拖拽只是可以把节点放置在你拖动到的画布位置，并不能改变节点的层级。</p>
|
||||||
|
</blockquote>
|
||||||
|
<blockquote>
|
||||||
|
<p>最后要注意这两个功能都需要先注册Drag插件。</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({
|
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
|
||||||
<span class="hljs-comment">// ...</span>
|
<span class="hljs-comment">// ...</span>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user