mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-25 12:27:40 +08:00
'更新文档'
This commit is contained in:
wanglin2
parent
749a4d0e81
commit
bdb6078df6
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "simple-mind-map",
|
||||
"version": "0.6.2",
|
||||
"version": "0.6.3",
|
||||
"description": "一个简单的web在线思维导图",
|
||||
"authors": [
|
||||
{
|
||||
|
||||
@ -11,7 +11,7 @@ let langList = [
|
||||
}
|
||||
]
|
||||
let StartList = ['introduction', 'start', 'deploy', 'client', 'translate', 'changelog']
|
||||
let CourseList = new Array(19).fill(0).map((_, index) => {
|
||||
let CourseList = new Array(20).fill(0).map((_, index) => {
|
||||
return 'course' + (index + 1)
|
||||
})
|
||||
let APIList = [
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# Changelog
|
||||
|
||||
## 0.6.3
|
||||
|
||||
Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.
|
||||
|
||||
New: 1.Support custom node content.
|
||||
|
||||
## 0.6.2
|
||||
|
||||
Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.6.3</h2>
|
||||
<p>Fix: 1.Fix the issue where the summary node will respond to inserting node shortcuts.</p>
|
||||
<p>New: 1.Support custom node content.</p>
|
||||
<h2>0.6.2</h2>
|
||||
<p>Fix: 1.Fixed the problem that the new node does not change with the theme in rich Text mode.</p>
|
||||
<h2>0.6.1</h2>
|
||||
|
||||
@ -67,6 +67,8 @@ const mindMap = new MindMap({
|
||||
| enableCtrlKeyNodeSelection（v0.6.0+） | Boolean | true | Whether to enable the function of holding down the Ctrl key to select multiple nodes | |
|
||||
| useLeftKeySelectionRightKeyDrag（v0.6.0+） | Boolean | false | Setting to left click to select multiple nodes and right click to drag the canvas. | |
|
||||
| beforeTextEdit（v0.6.0+） | Function/null | null | The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance | |
|
||||
| isUseCustomNodeContent（v0.6.3+） | Boolean | false | Whether to customize node content | |
|
||||
| customCreateNodeContent（v0.6.3+） | Function/null | null | If `isUseCustomNodeContent` is set to `true`, then this option needs to be used to pass in a method that receives the node instance `node` as a parameter (if you want to obtain data for that node, you can use `node.nodeData.data`). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return `null` | |
|
||||
|
||||
### Watermark config
|
||||
|
||||
|
||||
@ -329,6 +329,20 @@
|
||||
<td>The callback method before the node is about to enter editing. If the method returns a value other than true, the editing will be canceled. The function can return a value or a promise, and the callback parameter is the node instance</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isUseCustomNodeContent（v0.6.3+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether to customize node content</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customCreateNodeContent（v0.6.3+）</td>
|
||||
<td>Function/null</td>
|
||||
<td>null</td>
|
||||
<td>If <code>isUseCustomNodeContent</code> is set to <code>true</code>, then this option needs to be used to pass in a method that receives the node instance <code>node</code> as a parameter (if you want to obtain data for that node, you can use <code>node.nodeData.data</code>). You need to return the custom node content element, which is the DOM node. If a node does not require customization, you can return <code>null</code></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>Watermark config</h3>
|
||||
|
||||
@ -26,6 +26,7 @@ export default [
|
||||
{ path: 'course17', title: '导入和导出' },
|
||||
{ path: 'course18', title: '如何持久化数据' },
|
||||
{ path: 'course19', title: '插入和扩展节点图标' },
|
||||
{ path: 'course20', title: '如何自定义节点内容' },
|
||||
{ path: 'doExport', title: 'Export 插件' },
|
||||
{ path: 'drag', title: 'Drag插件' },
|
||||
{ path: 'introduction', title: '简介' },
|
||||
|
||||
@ -1,5 +1,11 @@
|
||||
# Changelog
|
||||
|
||||
## 0.6.3
|
||||
|
||||
修复：1.修复概要节点会响应插入节点快捷键的问题。
|
||||
|
||||
新增：1.支持自定义节点内容。
|
||||
|
||||
## 0.6.2
|
||||
|
||||
修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。
|
||||
|
||||
@ -1,6 +1,9 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.6.3</h2>
|
||||
<p>修复：1.修复概要节点会响应插入节点快捷键的问题。</p>
|
||||
<p>新增：1.支持自定义节点内容。</p>
|
||||
<h2>0.6.2</h2>
|
||||
<p>修复：1.修复富文本模式下，新建节点不随主题变化而变化的问题。</p>
|
||||
<h2>0.6.1</h2>
|
||||
|
||||
@ -67,6 +67,8 @@ const mindMap = new MindMap({
|
||||
| enableCtrlKeyNodeSelection（v0.6.0+） | Boolean | true | 是否开启按住ctrl键多选节点的功能 | |
|
||||
| useLeftKeySelectionRightKeyDrag（v0.6.0+） | Boolean | false | 设置为左键多选节点，右键拖动画布 | |
|
||||
| beforeTextEdit（v0.6.0+） | Function/null | null | 节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例 | |
|
||||
| isUseCustomNodeContent（v0.6.3+） | Boolean | false | 是否自定义节点内容 | |
|
||||
| customCreateNodeContent（v0.6.3+） | Function/null | null | 如果`isUseCustomNodeContent`设为`true`，那么需要使用该选项传入一个方法，接收节点实例`node`为参数（如果要获取该节点的数据，可以通过`node.nodeData.data`），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回`null`即可 | |
|
||||
|
||||
### 水印配置
|
||||
|
||||
|
||||
@ -329,6 +329,20 @@
|
||||
<td>节点即将进入编辑前的回调方法，如果该方法返回true以外的值，那么将取消编辑，函数可以返回一个值，或一个Promise，回调参数为节点实例</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>isUseCustomNodeContent（v0.6.3+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>是否自定义节点内容</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customCreateNodeContent（v0.6.3+）</td>
|
||||
<td>Function/null</td>
|
||||
<td>null</td>
|
||||
<td>如果<code>isUseCustomNodeContent</code>设为<code>true</code>，那么需要使用该选项传入一个方法，接收节点实例<code>node</code>为参数（如果要获取该节点的数据，可以通过<code>node.nodeData.data</code>），需要返回自定义节点内容元素，也就是DOM节点，如果某个节点不需要自定义，那么返回<code>null</code>即可</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>水印配置</h3>
|
||||
|
||||
98
web/src/pages/Doc/zh/course20/index.md
Normal file
98
web/src/pages/Doc/zh/course20/index.md
Normal file
@ -0,0 +1,98 @@
|
||||
# 如何自定义节点内容
|
||||
|
||||
> 该特性v0.6.3+版本支持
|
||||
|
||||
如果你想自定义节点的内容，那么可以在实例化`simple-mind-map`时传入一下选项：
|
||||
|
||||
```js
|
||||
new MindMap({
|
||||
isUseCustomNodeContent: true,
|
||||
customCreateNodeContent: (node) => {
|
||||
// return你的自定义DOM节点
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
`customCreateNodeContent`方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：
|
||||
|
||||
```js
|
||||
node.nodeData.data
|
||||
```
|
||||
|
||||
其他节点实例属性你可以自行打印出来看看。
|
||||
|
||||
`customCreateNodeContent`方法需要返回`DOM`节点，如果某个节点你不想自定义，那么可以返回`null`，那么还是会走内置的节点渲染逻辑。
|
||||
|
||||
如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。
|
||||
|
||||
## 示例1：渲染自定义DOM节点
|
||||
|
||||
```js
|
||||
{
|
||||
customCreateNodeContent: (node) => {
|
||||
let div = document.createElement('div')
|
||||
div.className = 'xxx'
|
||||
div.style.cssText = `xxx`
|
||||
div.innerHTML = `
|
||||
<h1>我是自定义节点</h1>
|
||||
${ node.nodeData.text }
|
||||
`
|
||||
return dev
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 示例2：渲染Vue2组件
|
||||
|
||||
如果想要使用一个相对简单的`Vue`组件，那么可以通过如下方式：
|
||||
|
||||
```js
|
||||
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`等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。
|
||||
|
||||
```js
|
||||
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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 示例3：渲染Vue3组件
|
||||
|
||||
93
web/src/pages/Doc/zh/course20/index.vue
Normal file
93
web/src/pages/Doc/zh/course20/index.vue
Normal file
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>如何自定义节点内容</h1>
|
||||
<blockquote>
|
||||
<p>该特性v0.6.3+版本支持</p>
|
||||
</blockquote>
|
||||
<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>) =></span> {
|
||||
<span class="hljs-comment">// return你的自定义DOM节点</span>
|
||||
}
|
||||
})
|
||||
</code></pre>
|
||||
<p><code>customCreateNodeContent</code>方法会接收当前遍历到的节点实例作为参数，一般而言你会需要该节点的数据，这可以通过如下方式获取：</p>
|
||||
<pre class="hljs"><code>node.nodeData.data
|
||||
</code></pre>
|
||||
<p>其他节点实例属性你可以自行打印出来看看。</p>
|
||||
<p><code>customCreateNodeContent</code>方法需要返回<code>DOM</code>节点，如果某个节点你不想自定义，那么可以返回<code>null</code>，那么还是会走内置的节点渲染逻辑。</p>
|
||||
<p>如果使用了自定义节点内容，那么内置的插入节点内容的相关方法你都不应该再使用，因为相当于整个节点内容都由你自己控制，另外，节点样式设置也不会再生效，切换主题也只会切换非节点内容的样式，最后，双击节点也不会再进入编辑，所以这个功能一般用于展示性的需求。</p>
|
||||
<h2>示例1：渲染自定义DOM节点</h2>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =></span> {
|
||||
<span class="hljs-keyword">let</span> div = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>)
|
||||
div.className = <span class="hljs-string">'xxx'</span>
|
||||
div.style.cssText = <span class="hljs-string">`xxx`</span>
|
||||
div.innerHTML = <span class="hljs-string">`
|
||||
<h1>我是自定义节点</h1>
|
||||
<span class="hljs-subst">${ node.nodeData.text }</span>
|
||||
`</span>
|
||||
<span class="hljs-keyword">return</span> dev
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<h2>示例2：渲染Vue2组件</h2>
|
||||
<p>如果想要使用一个相对简单的<code>Vue</code>组件，那么可以通过如下方式：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">'CustomNodeContent.vue'</span>
|
||||
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
|
||||
|
||||
{
|
||||
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =></span> {
|
||||
<span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>)
|
||||
<span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
|
||||
<span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
|
||||
<span class="hljs-comment">// props</span>
|
||||
<span class="hljs-attr">propsData</span>: {
|
||||
<span class="hljs-attr">html</span>: node.nodeData.data.text
|
||||
}
|
||||
})
|
||||
comp.$mount(el)
|
||||
<span class="hljs-keyword">return</span> comp.$el
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<p>如果你的<code>Vue</code>组件比较复杂，里面用到了<code>vueRouter</code>、<code>vuex</code>、<code>i18n</code>等，那么要和你项目的入口组件一样，在实例化时要把这些内容也加载到组件内，不然会报错。</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> CustomNodeContent <span class="hljs-keyword">from</span> <span class="hljs-string">'CustomNodeContent.vue'</span>
|
||||
<span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>
|
||||
<span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./router'</span>
|
||||
<span class="hljs-keyword">import</span> store <span class="hljs-keyword">from</span> <span class="hljs-string">'./store'</span>
|
||||
<span class="hljs-keyword">import</span> i18n <span class="hljs-keyword">from</span> <span class="hljs-string">'./i18n'</span>
|
||||
|
||||
{
|
||||
<span class="hljs-attr">customCreateNodeContent</span>: <span class="hljs-function">(<span class="hljs-params">node</span>) =></span> {
|
||||
<span class="hljs-keyword">let</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">'div'</span>)
|
||||
<span class="hljs-keyword">let</span> Comp = Vue.extend(CustomNodeContent)
|
||||
<span class="hljs-keyword">let</span> comp = <span class="hljs-keyword">new</span> Comp({
|
||||
<span class="hljs-comment">// props</span>
|
||||
<span class="hljs-attr">propsData</span>: {
|
||||
<span class="hljs-attr">html</span>: node.nodeData.data.text
|
||||
},
|
||||
router,
|
||||
store,
|
||||
i18n
|
||||
})
|
||||
comp.$mount(el)
|
||||
<span class="hljs-keyword">return</span> comp.$el
|
||||
}
|
||||
}
|
||||
</code></pre>
|
||||
<h2>示例3：渲染Vue3组件</h2>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
36
web/src/pages/Edit/components/CustomNodeContent.vue
Normal file
36
web/src/pages/Edit/components/CustomNodeContent.vue
Normal file
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div class="customNodeContent">
|
||||
<p>{{ title }}</p>
|
||||
<p v-html="html"></p>
|
||||
<p :style="{ backgroundColor: color }" @click="onClick">点击我会变色</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
html: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
title: '我是自定义节点',
|
||||
color: ''
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.color = 'red'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.customNodeContent {
|
||||
padding: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@ -48,8 +48,14 @@ import Navigator from './Navigator.vue'
|
||||
import NodeImgPreview from './NodeImgPreview.vue'
|
||||
import SidebarTrigger from './SidebarTrigger.vue'
|
||||
import { mapState } from 'vuex'
|
||||
import customThemeList from '@/customThemes'
|
||||
import icon from '@/config/icon'
|
||||
import customThemeList from '@/customThemes'
|
||||
import CustomNodeContent from './CustomNodeContent.vue'
|
||||
import Color from './Color.vue'
|
||||
import Vue from 'vue'
|
||||
import router from '../../../router'
|
||||
import store from '../../../store'
|
||||
import i18n from '../../../i18n'
|
||||
|
||||
// 注册插件
|
||||
MindMap
|
||||
@ -293,7 +299,32 @@ export default {
|
||||
},
|
||||
...(config || {}),
|
||||
iconList: icon,
|
||||
useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag
|
||||
useLeftKeySelectionRightKeyDrag: this.useLeftKeySelectionRightKeyDrag,
|
||||
isUseCustomNodeContent: false,
|
||||
// 示例1：组件里用到了router、store、i18n等实例化vue组件时需要用到的东西
|
||||
// customCreateNodeContent: (node) => {
|
||||
// let el = document.createElement('div')
|
||||
// let Comp = Vue.extend(Color)
|
||||
// let comp = new Comp({
|
||||
// router,
|
||||
// store,
|
||||
// i18n
|
||||
// })
|
||||
// comp.$mount(el)
|
||||
// return comp.$el
|
||||
// },
|
||||
// 示例2：组件里没有用到示例1的东西
|
||||
// customCreateNodeContent: (node) => {
|
||||
// let el = document.createElement('div')
|
||||
// let Comp = Vue.extend(CustomNodeContent)
|
||||
// let comp = new Comp({
|
||||
// propsData: {
|
||||
// html: node.nodeData.data.text
|
||||
// }
|
||||
// })
|
||||
// comp.$mount(el)
|
||||
// return comp.$el
|
||||
// }
|
||||
})
|
||||
if (this.openNodeRichText) this.addRichTextPlugin()
|
||||
this.mindMap.keyCommand.addShortcut('Control+s', () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user