3382-1795100a52e742adac5e.js

(self.webpackChunkzent_docs=self.webpackChunkzent_docs||[]).push([[3382],{13382:(n,s,a)=>{"use strict";a.r(s),a.d(s,{default:()=>x});var t=a(73450),p=a(27378),e=a(57318),c=a(90218),o=a(39215),l=a(24246);function u(n,s){var a=Object.keys(n);if(Object.getOwnPropertySymbols){var t=Object.getOwnPropertySymbols(n);s&&(t=t.filter((function(s){return Object.getOwnPropertyDescriptor(n,s).enumerable}))),a.push.apply(a,t)}return a}function k(n){for(var s=1;s<arguments.length;s++){var a=null!=arguments[s]?arguments[s]:{};s%2?u(Object(a),!0).forEach((function(s){(0,t.Z)(n,s,a[s])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(a)):u(Object(a)).forEach((function(s){Object.defineProperty(n,s,Object.getOwnPropertyDescriptor(a,s))}))}return n}var i=function(){var n=c.v.MenuItem,s=(n,s)=>{},a=()=>(0,l.jsxs)(c.v,{onClick:s,className:"hello",children:[(0,l.jsx)(n,{className:"food",children:"食品分类"},"1-1"),(0,l.jsx)(n,{disabled:!0,children:"服装分类"},"1-2")]});return(0,l.jsx)(a,{})},r=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{onClick:a,className:"hello",children:[(0,l.jsx)(n,{className:"food",children:"食品分类"},"1-1"),(0,l.jsx)(n,{disabled:!0,children:"服装分类"},"1-2"),(0,l.jsxs)(s,{title:"电器分类",overlayClassName:"sub",children:[(0,l.jsx)(n,{className:"tv",children:"电视机"},"2-1"),(0,l.jsx)(n,{disabled:!0,children:"笔记本"},"2-2"),(0,l.jsx)(n,{children:"洗衣机"},"2-3")]}),(0,l.jsxs)(s,{title:"美妆分类",disabled:!0,children:[(0,l.jsx)(n,{children:"眼影"},"3-1"),(0,l.jsx)(n,{children:"洗面奶"},"3-2")]})]});return(0,l.jsx)(t,{})},d=function(){var n=c.v.MenuItem,s=c.v.SubMenu;return(0,l.jsx)("div",{className:"zent-menu-simple-wrapper",children:(0,l.jsxs)(c.v,{className:"simple",onClick:function(n,s){},children:[(0,l.jsx)(n,{children:"广东"}),(0,l.jsxs)(s,{title:"江苏",children:[(0,l.jsx)(n,{children:"苏州"}),(0,l.jsx)(n,{children:"无锡"}),(0,l.jsx)(n,{children:"常州"}),(0,l.jsx)(n,{children:"镇江"}),(0,l.jsxs)(s,{title:"南京",children:[(0,l.jsx)(n,{children:"江宁区"}),(0,l.jsx)(n,{children:"仙林区"})]})]}),(0,l.jsx)(n,{children:"山东"}),(0,l.jsxs)(s,{title:"浙江",children:[(0,l.jsxs)(s,{title:"杭州",children:[(0,l.jsx)(n,{children:"西湖区"}),(0,l.jsx)(n,{children:"上城区"})]}),(0,l.jsx)(n,{children:"温州"}),(0,l.jsx)(n,{children:"绍兴"}),(0,l.jsx)(n,{children:"嘉兴"})]})]})})},m=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{onClick:a,className:"hello",children:[(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"youzan"}),"电器分类"]}),overlayClassName:"sub",children:[(0,l.jsx)(n,{className:"tv",children:"电视机"},"2-1"),(0,l.jsx)(n,{disabled:!0,children:"笔记本"},"2-2"),(0,l.jsx)(n,{children:"洗衣机"},"2-3")]}),(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"settings"}),"美妆分类"]}),children:[(0,l.jsx)(n,{children:"眼影"},"3-1"),(0,l.jsx)(n,{children:"洗面奶"},"3-2")]})]});return(0,l.jsx)(t,{})},g=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{mode:"inline",onClick:a,children:[(0,l.jsx)(n,{children:"食品分类"},"1-1"),(0,l.jsx)(n,{children:"服装分类"},"1-2"),(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"youzan"}),"电器分类"]}),children:[(0,l.jsx)(n,{children:"电视机"},"1-3-1"),(0,l.jsx)(n,{children:"笔记本"},"1-3-2"),(0,l.jsx)(n,{children:"洗衣机"},"1-3-3")]},"1-3"),(0,l.jsxs)(s,{title:"美妆分类",children:[(0,l.jsx)(n,{children:"眼影"},"1-4-1"),(0,l.jsx)(n,{children:"洗面奶"},"1-4-2"),(0,l.jsxs)(s,{title:"食品分类",children:[(0,l.jsx)(n,{children:"电视机"},"1-4-3-1"),(0,l.jsx)(n,{children:"笔记本"},"1-4-3-2"),(0,l.jsx)(n,{children:"洗衣机"},"1-4-3-3")]},"1-4-3")]},"1-4"),(0,l.jsx)(n,{disabled:!0,children:"服装分类"},"1-5"),(0,l.jsx)(s,{title:"食品分类",disabled:!0},"1-6")]});return(0,l.jsx)(t,{})},h=function(){var n=c.v.MenuItem,s=c.v.SubMenu,a=(n,s)=>{},t=()=>(0,l.jsxs)(c.v,{mode:"inline",defaultSelectedKey:"1-2",defaultExpandedKeys:["1-4","1-4-3"],onClick:a,children:[(0,l.jsx)(n,{children:"食品分类"},"1-1"),(0,l.jsx)(n,{children:"服装分类"},"1-2"),(0,l.jsxs)(s,{title:(0,l.jsxs)("span",{children:[(0,l.jsx)(o.J,{type:"youzan"}),"电器分类"]}),children:[(0,l.jsx)(n,{children:"电视机"},"1-3-1"),(0,l.jsx)(n,{children:"笔记本"},"1-3-2"),(0,l.jsx)(n,{children:"洗衣机"},"1-3-3")]},"1-3"),(0,l.jsxs)(s,{title:"美妆分类",children:[(0,l.jsx)(n,{children:"眼影"},"1-4-1"),(0,l.jsx)(n,{children:"洗面奶"},"1-4-2"),(0,l.jsxs)(s,{title:"食品分类",children:[(0,l.jsx)(n,{children:"电视机"},"1-4-3-1"),(0,l.jsx)(n,{children:"笔记本"},"1-4-3-2"),(0,l.jsx)(n,{children:"洗衣机"},"1-4-3-3")]},"1-4-3")]},"1-4")]});return(0,l.jsx)(t,{})};function y(n){return(0,l.jsx)(n.tag,k(k({},n.attributes),{},{dangerouslySetInnerHTML:{__html:n.html}}))}function v(n){return(0,l.jsx)(y,{tag:"section",html:n.html,attributes:{className:"zandoc-react-markdown"}})}function M(n){return(0,l.jsx)(y,{tag:"style",html:n.style})}function b(n,s){for(;n;)return n.offsetTop&&"static"!==getComputedStyle(n).position&&(s+=n.offsetTop),b(n.parentNode,s);return s}class f extends p.Component{constructor(...n){super(...n),(0,t.Z)(this,"state",{showCode:!1}),(0,t.Z)(this,"toggle",(()=>{this.setState({showCode:!this.state.showCode})}))}render(){var n=this.state.showCode,s=this.props,a=s.title,t=s.src,p=s.children;return(0,l.jsxs)("div",{className:"zandoc-react-demo",children:[(0,l.jsx)("div",{className:"zandoc-react-demo__preview",children:p}),(0,l.jsxs)("div",{className:"zandoc-react-demo__bottom",onClick:this.toggle,children:[(0,l.jsx)("div",{className:"zandoc-react-demo__title",children:(0,l.jsx)("p",{children:a||""})}),(0,l.jsx)("i",{className:"zenticon zenticon-caret-up zandoc-react-demo__toggle ".concat(n?"zandoc-react-demo__toggle-on":"zandoc-react-demo__toggle-off")})]}),n&&(0,l.jsx)("pre",{className:"zandoc-react-demo__code",children:(0,l.jsx)(y,{tag:"code",html:t,attributes:{className:"language-jsx"}})})]})}}class x extends p.Component{componentDidMount(){var n=location.hash;if(n){var s=document.querySelector('a[href="'.concat(n,'"]'));s&&(0,e.l)(document.documentElement,0,b(s,-9))}}render(){return p.createElement("div",{className:"zandoc-react-container"},p.createElement(M,{style:""}),p.createElement(v,{html:'<h2 class="anchor-heading"><a href="#menu-cai-dan">¶</a><a href="javascript:void(0)" id="menu-cai-dan" class="anchor-point"></a>Menu 菜单</h2>\n<p>菜单，为页面提供导航的菜单</p>\n<h3 class="anchor-heading"><a href="#dai-ma-yan-shi">¶</a><a href="javascript:void(0)" id="dai-ma-yan-shi" class="anchor-point"></a>代码演示</h3>'}),p.createElement(f,{title:"基础用法",id:"Demobasic",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>\n      <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>food<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>食品分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>服装分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(i)),p.createElement(f,{title:"二级菜单",id:"Demosubmenu",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>\n      <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>food<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>食品分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>服装分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"电器分类"</span><span class="token punctuation">}</span></span> <span class="token attr-name">overlayClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电视机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>笔记本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗衣机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"美妆分类"</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>眼影<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗面奶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(r)),p.createElement(f,{title:"多级嵌套",id:"Demonested",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token function-variable function">clickHandler</span> <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>event<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span><span class="token punctuation">;</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>zent-menu-simple-wrapper<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>simple<span class="token punctuation">"</span></span> <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>clickHandler<span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>广东<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>江苏<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>苏州<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>无锡<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>常州<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>镇江<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>南京<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>江宁区<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>仙林区<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>山东<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>浙江<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>杭州<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>西湖区<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>上城区<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>温州<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>绍兴<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>嘉兴<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">></span></span>\n    <span class="token punctuation">,</span> mountNode\n<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(d)),p.createElement(f,{title:"带有图标",id:"Demowithicon",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">,</span> <span class="token maybe-class-name">Icon</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>\n      <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n      <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>hello<span class="token punctuation">"</span></span>\n    <span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>电器分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token attr-name">overlayClassName</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>sub<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-1<span class="token punctuation">"</span></span> <span class="token attr-name">className</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>tv<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电视机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-2<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>笔记本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>2-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗衣机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>settings<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>美妆分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>眼影<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗面奶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(m)),p.createElement(f,{title:"行内模式",id:"Demoinline",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>\n      <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span>\n      <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n    <span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        食品分类\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        服装分类\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>电器分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电视机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>笔记本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗衣机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"美妆分类"</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>眼影<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗面奶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"食品分类"</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电视机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>笔记本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗衣机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-5<span class="token punctuation">"</span></span> <span class="token attr-name">disabled</span><span class="token punctuation">></span></span>\n        服装分类\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-6<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"食品分类"</span><span class="token punctuation">}</span></span> <span class="token attr-name">disabled</span> <span class="token punctuation">/></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(g)),p.createElement(f,{title:"行内模式默认选中",id:"Demoinlineselected",src:'<span class="token keyword module">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">Menu</span> <span class="token punctuation">}</span></span> <span class="token keyword module">from</span> <span class="token string">\'zent\'</span><span class="token punctuation">;</span>\n<span class="token keyword">const</span> <span class="token punctuation">{</span> <span class="token maybe-class-name">MenuItem</span><span class="token punctuation">,</span> <span class="token maybe-class-name">SubMenu</span> <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token maybe-class-name">Menu</span><span class="token punctuation">;</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function">onClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token parameter">e<span class="token punctuation">,</span> key</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>e<span class="token punctuation">,</span> key<span class="token punctuation">)</span><span class="token punctuation">;</span>\n<span class="token punctuation">}</span>\n\n<span class="token keyword">const</span> <span class="token function-variable function"><span class="token maybe-class-name">Example</span></span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=></span> <span class="token punctuation">{</span>\n  <span class="token keyword control-flow">return</span> <span class="token punctuation">(</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Menu</span></span>\n      <span class="token attr-name">mode</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>inline<span class="token punctuation">"</span></span>\n      <span class="token attr-name">defaultSelectedKey</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span>\n      <span class="token attr-name">defaultExpandedKeys</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token punctuation">[</span><span class="token string">"1-4"</span><span class="token punctuation">,</span> <span class="token string">"1-4-3"</span><span class="token punctuation">]</span><span class="token punctuation">}</span></span>\n      <span class="token attr-name">onClick</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span>onClick<span class="token punctuation">}</span></span>\n    <span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        食品分类\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        服装分类\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Icon</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>youzan<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>电器分类<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">></span></span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电视机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>笔记本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗衣机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"美妆分类"</span><span class="token punctuation">}</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>眼影<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗面奶<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">SubMenu</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3<span class="token punctuation">"</span></span> <span class="token attr-name">title</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token string">"食品分类"</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-1<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>电视机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>笔记本<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">MenuItem</span></span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>1-4-3-3<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>洗衣机<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">MenuItem</span></span><span class="token punctuation">></span></span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n  <span class="token punctuation">)</span>\n<span class="token punctuation">}</span>\n\n<span class="token maybe-class-name">ReactDOM</span><span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Example</span></span> <span class="token punctuation">/></span></span><span class="token punctuation">,</span> mountNode<span class="token punctuation">)</span><span class="token punctuation">;</span>'},p.createElement(h)),p.createElement(v,{html:'<h3 class="anchor-heading"><a href="#api">¶</a><a href="javascript:void(0)" id="api" class="anchor-point"></a>API</h3>\n<h4 class="anchor-heading"><a href="#menu">¶</a><a href="javascript:void(0)" id="menu" class="anchor-point"></a>Menu</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>可选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>点击菜单节点回调</td>\n<td><code>(e: React.MouseEvent, key: string) => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onSubMenuClick</td>\n<td>点击子菜单(非叶子节点)的回调, 入参为子菜单 ID</td>\n<td><code>(id: string | number) => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>mode</td>\n<td>模式</td>\n<td>string</td>\n<td>\'pop\'</td>\n<td>\'pop\', \'inline\'</td>\n</tr>\n<tr>\n<td>style</td>\n<td>自定义内联样式</td>\n<td>object</td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>节点类名</td>\n<td><code>string</code></td>\n<td></td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#inline-mo-shi-menu-can-shu">¶</a><a href="javascript:void(0)" id="inline-mo-shi-menu-can-shu" class="anchor-point"></a><code>inline</code> 模式 Menu 参数</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n<th>可选值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>defaultExpandedKeys</td>\n<td>默认展开的 SubMenu 的 keys</td>\n<td><code>string[]</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>defaultSelectedKey</td>\n<td>默认选中的 MenuItem 的 key</td>\n<td><code>string</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>selectedKey</td>\n<td>选中的 MenuItem 的 key</td>\n<td><code>string</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>expandedKeys</td>\n<td>展开的 SubMenu 的 keys</td>\n<td><code>string[]</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onSelectChange</td>\n<td>选中的 MenuItem 的 key 变化时的回调函数</td>\n<td><code>(key: string) => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>onExpandChange</td>\n<td>菜单展开/折叠时的回调, 入参为此时处于展开状态的 SubMenu id 数组</td>\n<td><code>(keys: string[]) => void</code></td>\n<td></td>\n<td></td>\n</tr>\n<tr>\n<td>inlineIndent</td>\n<td><code>inline</code>\n 模式下的缩进(px)</td>\n<td><code>number</code></td>\n<td>24</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#menuitem">¶</a><a href="javascript:void(0)" id="menuitem" class="anchor-point"></a>MenuItem</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>item 的唯一标志</td>\n<td>string</td>\n<td>内部生成的唯一ID</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否禁用当前菜单项</td>\n<td>bool</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>节点自定义类名</td>\n<td>string</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h4 class="anchor-heading"><a href="#submenu">¶</a><a href="javascript:void(0)" id="submenu" class="anchor-point"></a>SubMenu</h4>\n<table class="table">\n<thead>\n<tr>\n<th>参数</th>\n<th>说明</th>\n<th>类型</th>\n<th>默认值</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>key</td>\n<td>subMenu 的唯一标志</td>\n<td>string</td>\n<td>内部生成的唯一ID</td>\n</tr>\n<tr>\n<td>title</td>\n<td>子菜单项显示值</td>\n<td>node</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>是否禁用当前子菜单</td>\n<td>bool</td>\n<td></td>\n</tr>\n<tr>\n<td>overlayClassName</td>\n<td>弹出菜单的自定义类名</td>\n<td>string</td>\n<td></td>\n</tr>\n<tr>\n<td>className</td>\n<td>子菜单项自定义类名</td>\n<td>string</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 class="anchor-heading"><a href="#faq">¶</a><a href="javascript:void(0)" id="faq" class="anchor-point"></a>FAQ</h3>\n<ul>\n<li>\n<p>菜单组件使用统一代理的点击事件回调函数, 其参数为 event 和 key(实际上是节点的 index 属性值)。</p>\n</li>\n<li>\n<p>当 MenuItem 不设置 <code>key</code> 属性时的会按顺序和层级自动生成节点的唯一标识(从0开始)并保存在 <code>speckey</code> 属性上, 作为 <code>onClick</code> 函数的第二个参数。\n如果手动设置了 <code>key</code> 属性则会被复制到 <code>speckey</code> 属性, 覆盖自动生成的标识。建议在Menu不复杂的情况下手动为 MenuItem 设置格式合理的 <code>key</code> 属性。</p>\n<pre><code class="language-text"><span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span> <span class="token punctuation">/></span></span>   <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_0\'</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>      <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_1\'</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span> <span class="token punctuation">/></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_1_0\'</span>\n        <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span> <span class="token punctuation">/></span></span> <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_1_1\'</span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">SubMenu</span></span><span class="token punctuation">></span></span>\n      <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;</span><span class="token class-name">MenuItem</span></span> <span class="token punctuation">/></span></span>   <span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span><span class="token operator">--</span> <span class="token string">\'item_2\'</span>\n    <span class="token tag"><span class="token tag"><span class="token punctuation">&#x3C;/</span><span class="token class-name">Menu</span></span><span class="token punctuation">></span></span>\n\n    <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token template-punctuation string">`</span></span>`</code></pre>\n</li>\n</ul>'}))}}},90218:(n,s,a)=>{"use strict";a.d(s,{v:()=>y,Z:()=>v});var t=a(59312),p=a(24246),e=a(60042),c=a.n(e),o=a(27378),l=a(17949),u=a(42690),k=a(53090),i=function(n){function s(){return null!==n&&n.apply(this,arguments)||this}return(0,t.ZT)(s,n),s.prototype.renderCommonMenuItem=function(n,s,a,p){var e=(0,t.pi)({specKey:(0,k.o)(n,s,a),onClick:this.handleClick},p);return(0,o.cloneElement)(n,e)},s}(o.PureComponent),r=a(80736),d=a(27036),m=a(79737),g=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.handleClick=function(n,a){(0,s.props.onClick)(n,a)},s.onSubMenuClick=function(){s.props.onSubMenuClick&&s.props.onSubMenuClick(s.props.specKey)},s.renderSubMenuItems=function(n,a){if(!n)return null;var t=s.props.specKey;return s.renderCommonMenuItem(n,a,t)},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this.props,s=n.children,a=n.visible,e=n.overlayCx;return a?(0,p.jsx)("ul",(0,t.pi)({className:c()("zent-menu","zent-submenu-content",e),onClick:this.onSubMenuClick,"data-zv":"10.0.10"},{children:o.Children.map(s,this.renderSubMenuItems)}),void 0):null},s}(i),h=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.state={subMenuVisible:!1},s.getEventHanders=function(n,a){var t={};return n||a||(t={onMouseEnter:s.onMouseEnter,onMouseLeave:s.onMouseLeave}),t},s.handleClick=function(n,a){var t=s.props,p=t.onClick;!t.isInline&&s.setState({subMenuVisible:!1}),p(n,a)},s.titleClickHandler=function(n){var a,t,p=s.props,e=p.isInline,c=p.specKey,o=p.toggleExpand;null===(t=(a=s.props).onSubMenuClick)||void 0===t||t.call(a,c),e&&o(c),n.stopPropagation()},s.onMouseEnter=function(){s.leaveTimer&&clearTimeout(s.leaveTimer),s.enterTimer=setTimeout((function(){s.setState({subMenuVisible:!0})}),200)},s.onMouseLeave=function(){s.enterTimer&&clearTimeout(s.enterTimer),s.leaveTimer=setTimeout((function(){s.setState({subMenuVisible:!1})}),200)},s.renderInlineChild=function(n,a){var t=s.props,p=t.depth,e=t.isInline,c=t.inlineIndent,o=t.selectedKey,l=t.expandKeys,u=t.handleSelect,k=t.toggleExpand,i=t.specKey;return s.renderCommonMenuItem(n,a,i,{depth:p+1,isInline:e,inlineIndent:c,selectedKey:o,expandKeys:l,handleSelect:u,toggleExpand:k,onSubMenuClick:s.props.onSubMenuClick})},s}return(0,t.ZT)(s,n),s.prototype.renderContent=function(){var n=this.props,s=n.children,a=n.specKey,e=n.overlayClassName,c=n.isInline,l=n.expandKeys,u=l&&-1!==l.indexOf(a);return c?(0,p.jsx)(m.H,(0,t.pi)({duration:200,height:u?"auto":0},{children:(0,p.jsx)("ul",(0,t.pi)({className:"zent-menu__inner","data-zv":"10.0.10"},{children:o.Children.map(s,this.renderInlineChild)}),void 0)}),void 0):(0,p.jsx)(g,(0,t.pi)({visible:this.state.subMenuVisible,onClick:this.handleClick,specKey:a,overlayCx:e,onSubMenuClick:this.props.onSubMenuClick},{children:s}),void 0)},s.prototype.render=function(){var n=this.props,s=n.className,a=n.disabled,e=n.title,o=n.isInline,l=n.depth,u=n.inlineIndent,i=n.expandKeys,r=n.specKey,m=i&&-1!==i.indexOf(r),g=this.getEventHanders(a,o),h=(0,k.g)({isInline:o,depth:l,inlineIndent:u}),y=c()(s,{"zent-menu-item":!o,"zent-menu-item-disabled":a,"zent-submenu":!o,"zent-menu__inline-submenu":o,"zent-menu__inline-item-disabled":a&&o});return(0,p.jsxs)("li",(0,t.pi)({className:y},g,{"data-zv":"10.0.10"},{children:[(0,p.jsxs)("div",(0,t.pi)({className:c()({"zent-submenu-title":!o,"zent-menu__inline-submenu-title":o,"zent-submenu-disabled":a}),style:h,onClick:this.titleClickHandler,"data-zv":"10.0.10"},{children:[e,!a&&(0,p.jsx)(d.Z,{className:c()("zent-submenu-title-operate-icon",{"zent-menu__inline-submenu-icon--expand":o&&m}),type:"right"},void 0)]}),void 0),!a&&this.renderContent()]}),void 0)},s.defaultProps={className:""},s}(i),y=function(n){function s(s){var a,p,e,c=n.call(this,s)||this;return c.toggleExpand=function(n){var s,a,p=c.state.expandedKeys,e=-1!==p.indexOf(n)?p.filter((function(s){return s!==n})):(0,t.ev)([n],p);c.setState({expandedKeys:e}),null===(a=(s=c.props).onExpandChange)||void 0===a||a.call(s,e)},c.handleSelect=function(n){var s,a;c.setState({selectedKey:n}),null===(a=(s=c.props).onSelectChange)||void 0===a||a.call(s,n)},c.handleClick=function(n,s){var a=c.props.onClick;a&&a(n,s)},c.renderMenuItem=function(n,s){return n?c.renderCommonMenuItem(n,s,void 0,{depth:1,isInline:"inline"===c.props.mode,inlineIndent:c.props.inlineIndent,selectedKey:c.state.selectedKey,expandKeys:c.state.expandedKeys,handleSelect:c.handleSelect,toggleExpand:c.toggleExpand,onSubMenuClick:c.props.onSubMenuClick}):null},"inline"===s.mode?c.state={selectedKey:null!==(a=s.selectedKey)&&void 0!==a?a:s.defaultSelectedKey,expandedKeys:null!==(e=null!==(p=s.expandedKeys)&&void 0!==p?p:s.defaultExpandedKeys)&&void 0!==e?e:s.defaultExpandKeys,prevExpandedKeysProp:s.expandedKeys,prevSelectedKeyProp:s.selectedKey}:c.state={},c}return(0,t.ZT)(s,n),s.getDerivedStateFromProps=function(n,s){if("inline"!==n.mode)return null;var a={prevSelectedKeyProp:n.selectedKey,prevExpandedKeysProp:n.expandedKeys};return n.selectedKey!==s.prevSelectedKeyProp&&n.selectedKey!==s.selectedKey&&(a.selectedKey=n.selectedKey),(0,l.Z)(n.expandedKeys,s.prevExpandedKeysProp)||(0,l.Z)(n.expandedKeys,s.expandedKeys)||(a.expandedKeys=n.expandedKeys),a},s.prototype.render=function(){var n=this.props,s=n.children,a=n.className,e=n.style,l="inline"===n.mode,u=c()("zent-menu",a,{"zent-menu__inline":l});return(0,p.jsx)("ul",(0,t.pi)({className:u,style:e,"data-zv":"10.0.10"},{children:o.Children.map(s,this.renderMenuItem)}),void 0)},s.MenuItem=r.Z,s.SubMenu=h,s.defaultProps={onClick:u.Z,mode:"pop",inlineIndent:24,defaultExpandKeys:[],onSubMenuClick:u.Z},s}(i),v=y},80736:(n,s,a)=>{"use strict";a.d(s,{s:()=>u});var t=a(59312),p=a(24246),e=a(27378),c=a(60042),o=a.n(c),l=a(53090),u=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.handleClick=function(n){var a=s.props,t=a.specKey,p=a.onClick,e=a.disabled,c=a.isInline,o=a.handleSelect;e||(c&&o(t),p(n,t))},s}return(0,t.ZT)(s,n),s.prototype.render=function(){var n=this.props,s=n.specKey,a=n.className,e=n.children,c=n.disabled,u=n.isInline,k=n.selectedKey,i=n.depth,r=n.inlineIndent,d=k===s,m=(0,l.g)({isInline:u,depth:i,inlineIndent:r});return(0,p.jsx)("li",(0,t.pi)({className:o()("zent-menu-item",a,{"zent-menu__inline-item":u,"zent-menu__inline-item-selected":d,"zent-menu-item-disabled":c}),style:m,onClick:this.handleClick,"data-zv":"10.0.10"},{children:e}),void 0)},s}(e.Component);s.Z=u},53090:(n,s,a)=>{"use strict";function t(n,s,a){return void 0===a&&(a="item"),n.key||a+"_"+s}function p(n){var s=n.isInline,a=n.depth,t=n.inlineIndent,p={};return s&&(p={paddingLeft:a*t+"px"}),p}a.d(s,{o:()=>t,g:()=>p})},79737:(n,s,a)=>{"use strict";a.d(s,{H:()=>l});var t=a(59312),p=a(24246),e=a(27378),c=a(17127);function o(n,s){n.style.height="number"==typeof s?s+"px":s}var l=function(n){function s(){var s=null!==n&&n.apply(this,arguments)||this;return s.ref=(0,e.createRef)(),s.timer=null,s}return(0,t.ZT)(s,n),s.prototype.componentDidMount=function(){var n=this,s=this.props,a=s.appear,t=s.height,p=s.duration,e=this.ref.current;if(a&&"auto"===t){var l=e.offsetHeight;e.style.height="0px",(0,c.tA)((function(){n.props.height===t&&(e.style.height=l+"px",n.timer=setTimeout((function(){n.timer=null,n.props.height===t&&(e.style.height="auto")}),p))}))}else o(e,t)},s.prototype.componentDidUpdate=function(n){var s=this,a=this.props,t=a.height,p=a.duration;if(n.height!==t){null!==this.timer&&(clearTimeout(this.timer),this.timer=null);var e=this.ref.current;if("auto"===n.height)e.style.height=e.offsetHeight+"px",(0,c.tA)((function(){s.props.height===t&&o(e,t)}));else if("auto"===t){var l=e.offsetHeight;e.style.height="auto";var u=e.offsetHeight;e.style.height=l+"px",(0,c.tA)((function(){e.style.height=u+"px",s.timer=setTimeout((function(){s.timer=null,s.props.height===t&&(e.style.height=t)}),p)}))}else o(e,t)}},s.prototype.render=function(){var n=this.props,s=n.duration,a=n.className,e=n.style,c=n.easing,o=n.overflow,l=n.children,u=n.transitionPrototype;return(0,p.jsx)("div",(0,t.pi)({ref:this.ref,className:a,style:(0,t.pi)((0,t.pi)({},e),{transition:u+" "+s+"ms "+c,overflow:o}),"data-zv":"10.0.10"},{children:l}),void 0)},s.defaultProps={appear:!1,duration:200,easing:"ease",overflow:"hidden",transitionPrototype:"height"},s}(e.Component)}}]);