|
|
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0c5538"],{"3f2a":function(s,t,a){"use strict";a.r(t);var n=function(){var s=this;s._self._c;return s._m(0)},l=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("主题")]),t("h2",[s._v("使用和切换主题")]),t("p",[t("code",[s._v("simple-mind-map")]),s._v("内置了很多主题，可以通过如下方式获取到所有的内置主题列表：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { themeList } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map/src/constants/constant'")]),s._v("\n"),t("span",{staticClass:"hljs-comment"},[s._v("// import { themeList } from 'simple-mind-map/src/utils/constant' v0.6.0以下版本使用该路径")]),s._v("\n")])]),t("p",[s._v("可以在实例化"),t("code",[s._v("simple-mind-map")]),s._v("时指定使用的主题：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'minions'")]),s._v("\n})\n")])]),t("p",[s._v("如果想动态切换主题也很简单：")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("mindMap.setTheme("),t("span",{staticClass:"hljs-string"},[s._v("'classic'")]),s._v(")\n")])]),t("p",[s._v("如果要获取当前使用的主题名称可以使用：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" theme = mindMap.getTheme()\n")])]),t("h2",[s._v("定义新主题")]),t("p",[s._v("除了可以使用内置的主题外，你也可以自定义新主题：")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" MindMap "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'simple-mind-map'")]),s._v("\n\n"),t("span",{staticClass:"hljs-comment"},[s._v("// 注册新主题")]),s._v("\nMindMap.defineTheme("),t("span",{staticClass:"hljs-string"},[s._v("'主题名称'")]),s._v(", {\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 主题配置")]),s._v("\n})\n\n"),t("span",{staticClass:"hljs-comment"},[s._v("// 1.实例化时使用新注册的主题")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" mindMap = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" MindMap({\n "),t("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'主题名称'")]),s._v("\n})\n\n"),t("span",{staticClass:"hljs-comment"},[s._v("// 2.动态切换新主题")]),s._v("\nmindMap.setTheme("),t("span",{staticClass:"hljs-string"},[s._v("'主题名称'")]),s._v(")\n")])]),t("p",[s._v("最好在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题。")]),t("p",[s._v("一个主题其实就是一个普通的对象，完整配置可以参考"),t("a",{attrs:{href:"https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js"}},[s._v("默认主题")]),s._v("，"),t("code",[s._v("defineTheme")]),s._v("方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考"),t("a",{attrs:{href:"https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js"}},[s._v("blueSky")]),s._v("。")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("MindMap.defineTheme("),t("span",{staticClass:"hljs-string"},[s._v("'redSpirit'")]),s._v(", {\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 背景颜色")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("backgroundColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 238, 228)'")]),s._v(",\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 连线的颜色")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("lineColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(230, 138, 131)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("lineWidth")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 概要连线的粗细")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("generalizationLineWidth")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 概要连线的颜色")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("generalizationLineColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(222, 101, 85)'")]),s._v(",\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 根节点样式")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("root")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("fillColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(207, 44, 44)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 233, 157)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderWidth")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("fontSize")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 233, 157)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderWidth")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n }\n },\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 二级节点样式")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("second")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("fillColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 255, 255)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(211, 58, 21)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(222, 101, 85)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderWidth")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("fontSize")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 233, 157)'")]),s._v(",\n }\n },\n "),t("span",{staticClass:"hljs-comment"},[s._v("// 三级及以下节点样式")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("node")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("fontSize")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("14")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(144, 71, 43)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 233, 157)'")]),s._v("\n }\n },\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("fontSize")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("14")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("fillColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 247, 211)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(255, 202, 162)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderWidth")]),s._v(": "),t("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("color")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(187, 101, 69)'")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("borderColor")]),s._v(": "),t("span",{staticClass:"hljs-string"},[s._v("'rgb(222, 101, 85)'")]),s._v("\n }\n }\n})\n")])]),t("h2",[s._v("完整示例")]),t("iframe",{staticStyle:{width:"100%",height:"455px",border:"none"},attrs:{src:"https://wanglin2.github.io/playground/#eNrFV+tvG0UQ/1dWh9A5yDk/0wTjVIXCB6QGoRaJD7kIne/W9rbn3eN2nUcjSxBQadpUBYEoL6ESiZIPSKCCSh5U+Wf8SP8LZm/vZfuSlqpSP/ixszO/mf3N7Nzcpvam5xmrXazVtDq3feIJxLHoeudNSjoe8wXaRD5u5hGjS6xLBXbyiLct12Vrl3ET9VDTZx2kA4IeWywR6ixZntoyNQ5iF892QDrbsTxTMylCJnWxQFImNRcR7bqukhcKaPD468H2neHxJ8O/j0Y/fH5ya2u0dTC4ee/klz2T2oxygSxbkFX8HnMwB+skotzyyoxJFcrNL4Z3dvv7R092v4vM7LZFW/iDNu5gMMvNoMXzaFP6DSMx4PDBbk63XYtzYusA1wsRh3/tDW7sDA4e9R8fj77ZG3775zi6g5uEZqGHjBgphZzuY+eKR3wi9LzSQgh8nHy2M/z+jye7P51sP1TChmVfa/lAvnORucyvId1vNXLlubk8KlcW4Ku8MKPnE4Djn0eHx0BbGsMFt2PWlWIelaR1qVKKraXWh8QR7RqqJIDDB1snDz6NYUcP742ObqjdFqbYt1xy3RKE0UvPYp6Oatp8LMZyGcIrlvJoYS59wOH9A1URw/v/DP69q+Q+Y6IW0YhQk7juGFZxPo+qVfmJoRCyp/msgMu5+ZROg/kO9iOsSXl43GIsbjIqrpDruIbK1VioijUV3iTsWQFMuIqYRQiqMvhJmOkf7owOf5smh2OoT+csegLf4ddpBJUgE3Oy3pKCyTxHVtomDlHO4Ku08GL4yqBlfxtoGdy91T/6tb9/e5ofCm0kzU4SU5LDNBUlWUnzcMJqJeX4eaI+Pejw2kzFOn5nnhZ1dqKrcBkgnWenMdAsylyeKz89j2P0LAB+UAHnXv/f/IxVzyQ90IdFDxpyVr9O2mnUseNHVm660ctHDl6LGnMujAm7NeQwu9vBVBgtLN5xAZqKtzbedXJ6aHkReLagVfn6THg0xxJW6limJgWmNnZSKRZ4XUixqcUtTD0M06mXinabuI6PqVReTjAm4DK9THpKt4TE2bjDDKcryV5a7yVFEP0NZZEdoURchr4vp4D3GSfqQizrLm7KZ6puQ+ogTSuhupB1AmUGeQRFHhRXb+YNNXUEd27041eDL38P71wwffQPb/ePHqULjtGcLvvFR6qcwU9OLvNBE7lEuEhKLSr5YEoxVi23K8eCSE+5h1KFT72gZi+YumAhMAxMlsCwQqjukFUUzCKLphYG8TbuMFMLtkMF4iS7cYGCSr0Au2nFCEkw5jYsqaI2TVFvdIVgFF2wXWJfA5XUrARq6WmqXlC6oS1AT9qmBh2wPW1umsBJgo3+1QspLmDJxYaraLkQzpqmZhTUgBnNWJh3DJtzU4sza6RoizKzphpYqVh8NdBDyIsryMfgEfIWbATFJz+vTNIbQSWGVoMztyuUIYxTUIcwG4QrwbxkMe2+jUmrDerVYtFbjzxn+30t8tyx/BYBvxGqZzkOoa1IEIduhNl+xohLUQRh0PEaAKFSgxxoeU1lQI70xlXOKLxBBPBmuAEZiDuDqcELgmoHRgH+Gj70ZdLBMlmzDZ+tcewDiKmFVzXjpUHatoXweK1QcNc/pnyDG4zzWZvONjC5Csc24Km40aU2N2zWKUCZY8EzakO6CQ/T03r/AbfdVt0="}})])}],v={},i=v,_=a("2877"),r=Object(_["a"])(i,n,l,!1,null,null,null);t["default"]=r.exports}}]); |
