(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0e9802"],{"8e98":function(s,t,a){"use strict";a.r(t);var n=function(){var s=this;s._self._c;return s._m(0)},i=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("基本使用")]),t("blockquote",[t("p",[s._v("重要说明：")]),t("p",[s._v("1.本教程中的在线编辑器中使用的是完整版的simple-mind-map，即包含所有插件，如果你是通过"),t("code",[s._v("npm")]),s._v("方式使用的话，需要自己手动注册相关插件。")]),t("p",[s._v("2.本教程的代码示例基于Vue3.x，但是您不必担心，因为simple-mind-map本身是框架无关的，所以即使某些Vue3的语法您看不懂也不会影响对于逻辑的理解。")])]),t("p",[t("code",[s._v("simple-mind-map")]),s._v("的使用非常简单，提供一个宽高不为0的元素，然后创建一个实例即可：")]),t("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#eNptUktu2zAQvcqARWG7sCUV6EqVjX7QRRc+QacLVZzYLKQRQdJxAkObLHuKXiMXanOMDEXZCJIIECS+mff4+Dgn9dna7PpAqlSVb5yxATyFg90gm872LsAJHF0toedtf+BAGga4cn0HM2HNLl1bw3pb21RC5QVuadUJuupqiwoZ+SIxny9gvYETMkDTsw8QGyN9DUzHs9h8bACgtgTdN4eOOGQ7Ct9air9fbr/r+Wxifu051IbJzRbLxNJ1qMu0R3xQRQDVEyjBgW5ChFH9+3v/8Ofu/919tJvKwyQWG5u9abUjjs0/fiZ8iJ9h8RF5WCBXeYpQwpNFIMmgDiQrgEqbazB6jeq5YVSbKpeqtFX5E44sfbhtE/3TFDOqLE/ZThll5Lus8R6VeBCX8r55vsP5xEejw76E90XxdmwG2JPZ7UMJH4rC3oyYHOh1jXdnla52O8MlFJOGrbU2vDsDIiAxjMbVUiXbcQSy375nmbJRBaeC2L7cByoZqHQRWS6/mZNZMR3FE65+uf7oyYkIqulKXhmyxH2ZT2RN3gY1PAJQKfo9"}}),t("p",[s._v("注意，我们还给容器元素设置了样式：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-selector-id"},[s._v("#mindMapContainer")]),s._v(" * {\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),t("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n}\n")])]),t("p",[s._v("这是为了避免节点内的文字因为默认样式而出现偏移。")]),t("p",[s._v("一个节点的基本数据结构如下所示：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("{\n    "),t("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": {\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 节点文本")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'根节点'")]),s._v(",\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 图片")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("image")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'xxx.jpg'")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("imageTitle")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'图片名称'")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("imageSize")]),s._v(": {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1152")]),s._v(",\n            "),t("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("1152")]),s._v("\n        },\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 图标")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'priority_1'")]),s._v("],\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 标签")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": ["),t("span",{staticClass:"hljs-string"},[s._v("'标签1'")]),s._v(", "),t("span",{staticClass:"hljs-string"},[s._v("'标签2'")]),s._v("],\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 链接")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("hyperlink")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'http://lxqnsys.com/'")]),s._v(",\n        "),t("span",{staticClass:"hljs-attr"},[s._v("hyperlinkTitle")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'理想青年实验室'")]),s._v(",\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 备注内容")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("note")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'理想青年实验室\\n一个有意思的角落'")]),s._v(",\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 概要")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("generalization")]),s._v(": {\n            "),t("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'概要的内容'")]),s._v("\n        },\n        "),t("span",{staticClass:"hljs-comment"},[s._v("// 节点是否展开")]),s._v("\n        "),t("span",{staticClass:"hljs-attr"},[s._v("expand")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    },\n    "),t("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": []"),t("span",{staticClass:"hljs-comment"},[s._v("// 子节点")]),s._v("\n}\n")])]),t("p",[t("code",[s._v("icon")]),s._v("可以使用内置的图标，完整图标可以在"),t("a",{attrs:{href:"https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js"}},[s._v("icons.js")]),s._v("文件中查看。也可以扩展图标，参考"),t("a",{attrs:{href:"https://wanglin2.github.io/mind-map/#/doc/zh/course19/%E6%89%A9%E5%B1%95%E5%9B%BE%E6%A0%87"}},[s._v("扩展图标")]),s._v("。")]),t("p",[s._v("创建实例时还支持传递其他很多选项参数，完整选项列表可以在"),t("a",{attrs:{href:"https://wanglin2.github.io/mind-map/#/doc/zh/constructor/%E5%AE%9E%E4%BE%8B%E5%8C%96%E9%80%89%E9%A1%B9"}},[s._v("实例化选项")]),s._v("查看。")]),t("p",[s._v("这样得到的思维导图可以通过鼠标和快捷键进行操作，比如单击某个节点可以激活它，双击某个节点可以编辑节点文本，按下"),t("code",[s._v("Tab")]),s._v("键会给当前激活的节点添加一个子节点，按下"),t("code",[s._v("Enter")]),s._v("键会给当前激活的节点添加一个兄弟节点等等，完整的快捷键列表可以参考"),t("a",{attrs:{href:"https://github.com/wanglin2/mind-map/blob/main/web/src/config/zh.js#L246"}},[s._v("快捷键列表")]),s._v("。")]),t("p",[s._v("当然有些功能还是需要UI界面的，比如图标列表、编辑超链接等等，需要注意的是"),t("code",[s._v("simple-mind-map")]),s._v("库并不包含UI界面，所以需要你自己开发，然后通过"),t("code",[s._v("simple-mind-map")]),s._v("提供的相关API来操作，本教程的其他章节会向你介绍如何使用。")])])}],l={},v=l,_=a("2877"),p=Object(_["a"])(v,n,i,!1,null,null,null);t["default"]=p.exports}}]);