146 lines
7.1 KiB
Vue
146 lines
7.1 KiB
Vue
<template>
|
||
<div>
|
||
<h1>快捷键</h1>
|
||
<p><code>simple-mind-map</code>常用操作都支持快捷键方式使用，目前所有的快捷键列表如下：</p>
|
||
<pre class="hljs"><code>[
|
||
{
|
||
<span class="hljs-attr">type</span>: <span class="hljs-string">'节点操作'</span>,
|
||
<span class="hljs-attr">list</span>: [
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'插入下级节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Tab'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'插入同级节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Enter'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'插入父节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Shift + Tab'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'上移节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + ↑'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'下移节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + ↓'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'插入概要'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + S'</span><span class="hljs-comment">// v0.6.8+改为Ctrl + G</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'展开/收起节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'/'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'删除节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Delete | Backspace'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'仅删除当前节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Shift + Backspace'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'复制节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + C'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'剪切节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + X'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'粘贴节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + V'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'编辑节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'F2'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'文本换行'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Shift + Enter'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'回退'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + Z'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'前进'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + Y'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'全选'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + A'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'多选'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'右键 / Ctrl + 左键'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'一键整理布局'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + L'</span>
|
||
}
|
||
]
|
||
},
|
||
{
|
||
<span class="hljs-attr">type</span>: <span class="hljs-string">'画布操作'</span>,
|
||
<span class="hljs-attr">list</span>: [
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'放大'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + +'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'缩小'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + -'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'放大缩小'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + 鼠标滚动'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'回到根节点'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + Enter'</span>
|
||
},
|
||
{
|
||
<span class="hljs-attr">name</span>: <span class="hljs-string">'适应画布'</span>,
|
||
<span class="hljs-attr">value</span>: <span class="hljs-string">'Ctrl + i'</span>
|
||
}
|
||
]
|
||
}
|
||
]
|
||
</code></pre>
|
||
<p>默认当鼠标滑入画布范围内才会响应快捷键操作，如果你想去掉这个限制可以在实例化<code>simple-mind-map</code>时通过选项指定：</p>
|
||
<pre class="hljs"><code><span class="hljs-keyword">new</span> MindMap({
|
||
<span class="hljs-comment">// ...</span>
|
||
<span class="hljs-attr">enableShortcutOnlyWhenMouseInSvg</span>: <span class="hljs-literal">false</span>
|
||
})
|
||
</code></pre>
|
||
<p>你也可以添加新的快捷键：</p>
|
||
<pre class="hljs"><code>mindMap.keyCommand.addShortcut(<span class="hljs-string">'key'</span>, <span class="hljs-function">() =></span> {
|
||
<span class="hljs-comment">// 执行一些操作</span>
|
||
})
|
||
</code></pre>
|
||
<p><code>key</code>支持三种方式：</p>
|
||
<pre class="hljs"><code>Enter // 单个按键
|
||
Tab | Insert // 或
|
||
Shift + a // 与
|
||
</code></pre>
|
||
<p>要获取所有的按键值对应的名称，可以：</p>
|
||
<pre class="hljs"><code><span class="hljs-keyword">import</span> { keyMap } <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils/keyMap'</span>
|
||
</code></pre>
|
||
<p>可以添加当然也可以移除，详细文档可以参考<a href="https://wanglin2.github.io/mind-map/#/doc/zh/keyCommand">keyCommand</a>。</p>
|
||
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
|
||
</style> |