You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

1 lines
11 KiB

(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["chunk-2d0ab546"],{"158d":function(s,t,a){"use strict";a.r(t);var n=function(){var s=this;s._self._c;return s._m(0)},e=[function(){var s=this,t=s._self._c;return t("div",[t("h1",[s._v("如何自定义节点内容")]),t("blockquote",[t("p",[s._v("该特性v0.6.3+版本支持")])]),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("isUseCustomNodeContent")]),s._v(": "),t("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n "),t("span",{staticClass:"hljs-attr"},[s._v("customCreateNodeContent")]),s._v(": "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("node")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-comment"},[s._v("// return你的自定义DOM节点")]),s._v("\n }\n})\n")])]),t("p",[t("code",[s._v("customCreateNodeContent")]),s._v("方法会接收当前遍历到的节点实例作为参数,一般而言你会需要该节点的数据,这可以通过如下方式获取:")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("node.nodeData.data\n")])]),t("p",[s._v("其他节点实例属性你可以自行打印出来看看。")]),t("p",[t("code",[s._v("customCreateNodeContent")]),s._v("方法需要返回"),t("code",[s._v("DOM")]),s._v("节点,如果某个节点你不想自定义,那么可以返回"),t("code",[s._v("null")]),s._v(",那么还是会走内置的节点渲染逻辑。")]),t("p",[s._v("返回的"),t("code",[s._v("DOM")]),s._v("节点的宽高需要是确定的,如果是动态的那么会导致宽高获取错误,最终导致节点定位错误和发生重叠等问题。")]),t("p",[s._v("如果使用了自定义节点内容,那么内置的插入节点内容的相关方法你都不应该再使用,因为相当于整个节点内容都由你自己控制,另外,节点样式设置也不会再生效,切换主题也只会切换非节点内容的样式,最后,双击节点也不会再进入编辑,所以这个功能一般用于展示性的需求。")]),t("h2",[s._v("示例1:渲染自定义DOM节点")]),t("pre",{staticClass:"hljs"},[t("code",[s._v("{\n "),t("span",{staticClass:"hljs-attr"},[s._v("customCreateNodeContent")]),s._v(": "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("node")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" div = "),t("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".createElement("),t("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(")\n div.className = "),t("span",{staticClass:"hljs-string"},[s._v("'xxx'")]),s._v("\n div.style.cssText = "),t("span",{staticClass:"hljs-string"},[s._v("`xxx`")]),s._v("\n div.innerHTML = "),t("span",{staticClass:"hljs-string"},[s._v("`\n <h1>我是自定义节点</h1>\n "),t("span",{staticClass:"hljs-subst"},[s._v("${ node.nodeData.text }")]),s._v("\n `")]),s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" div\n }\n}\n")])]),t("h2",[s._v("示例2:渲染Vue2组件")]),t("p",[s._v("如果想要使用一个相对简单的"),t("code",[s._v("Vue")]),s._v("组件,那么可以通过如下方式:")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" CustomNodeContent "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'CustomNodeContent.vue'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\n{\n "),t("span",{staticClass:"hljs-attr"},[s._v("customCreateNodeContent")]),s._v(": "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("node")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" el = "),t("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".createElement("),t("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(")\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" Comp = Vue.extend(CustomNodeContent)\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" comp = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Comp({\n "),t("span",{staticClass:"hljs-comment"},[s._v("// props")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("propsData")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("html")]),s._v(": node.nodeData.data.text\n }\n })\n comp.$mount(el)\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" comp.$el\n }\n}\n")])]),t("p",[s._v("如果你的"),t("code",[s._v("Vue")]),s._v("组件比较复杂,里面用到了"),t("code",[s._v("vueRouter")]),s._v("、"),t("code",[s._v("vuex")]),s._v("、"),t("code",[s._v("i18n")]),s._v("等,那么要和你项目的入口组件一样,在实例化时要把这些内容也加载到组件内,不然会报错。")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" CustomNodeContent "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'CustomNodeContent.vue'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" router "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'./router'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" store "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'./store'")]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" i18n "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'./i18n'")]),s._v("\n\n{\n "),t("span",{staticClass:"hljs-attr"},[s._v("customCreateNodeContent")]),s._v(": "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("node")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" el = "),t("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".createElement("),t("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(")\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" Comp = Vue.extend(CustomNodeContent)\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" comp = "),t("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Comp({\n "),t("span",{staticClass:"hljs-comment"},[s._v("// props")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("propsData")]),s._v(": {\n "),t("span",{staticClass:"hljs-attr"},[s._v("html")]),s._v(": node.nodeData.data.text\n },\n router,\n store,\n i18n\n })\n comp.$mount(el)\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" comp.$el\n }\n}\n")])]),t("h2",[s._v("示例3:渲染Vue3组件")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { createApp } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v("\n"),t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" CustomNodeContent "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'./CustomNodeContent.vue'")]),s._v("\n\n{\n "),t("span",{staticClass:"hljs-attr"},[s._v("customCreateNodeContent")]),s._v(": "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("node")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" el = "),t("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".createElement("),t("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(")\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" app = createApp(CustomNodeContent, {"),t("span",{staticClass:"hljs-comment"},[s._v("// props")]),s._v("\n "),t("span",{staticClass:"hljs-attr"},[s._v("html")]),s._v(": node.nodeData.data.text\n })\n app.mount(el)\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" el\n }\n}\n")])]),t("h2",[s._v("示例4:渲染react组件")]),t("pre",{staticClass:"hljs"},[t("code",[t("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { createRoot } "),t("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),t("span",{staticClass:"hljs-string"},[s._v("'react-dom/client'")]),s._v("\n\n{\n "),t("span",{staticClass:"hljs-attr"},[s._v("customCreateNodeContent")]),s._v(": "),t("span",{staticClass:"hljs-function"},[s._v("("),t("span",{staticClass:"hljs-params"},[s._v("node")]),s._v(") =>")]),s._v(" {\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" el = "),t("span",{staticClass:"hljs-built_in"},[s._v("document")]),s._v(".createElement("),t("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(")\n el.style.width = "),t("span",{staticClass:"hljs-string"},[s._v("'227px'")]),s._v("\n el.style.height = "),t("span",{staticClass:"hljs-string"},[s._v("'60px'")]),s._v("\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" currentNode = node.nodeData.data\n "),t("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" root = createRoot(el)\n root.render({currentNode.text})\n "),t("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" el\n }\n}\n")])]),t("blockquote",[t("p",[s._v("感谢"),t("a",{attrs:{href:"https://github.com/h5chenhang"}},[s._v("h5chenhang")]),s._v("贡献的"),t("a",{attrs:{href:"https://github.com/wanglin2/mind-map/issues/192"}},[s._v("示例代码")]),s._v("。")])]),t("h2",[s._v("常见问题")]),t("p",[s._v("1.点击自定义内容中的输入框无法获取焦点和输入")]),t("p",[s._v("解决方法:阻止输入框的"),t("code",[s._v("mousedown")]),s._v("事件的冒泡。")])])}],l={},v=l,_=a("2877"),o=Object(_["a"])(v,n,e,!1,null,null,null);t["default"]=o.exports}}]);