doc_project/3x.antv.design/assets/index.d0ef545b.js

import{_ as y,a as R,q as Y,k as d,d as v,r as w,l as h,w as s,j as p,f as e,e as t,b as n,J as P,y as L,K as X,an as B,h as U,F as O,t as D}from"./index.3fe853a6.js";import{M as G}from"./MailOutlined.775e378b.js";import{A as V,a as M,M as T,P as K,D as H}from"./PieChartOutlined.10672048.js";import{S}from"./SettingOutlined.5038dea4.js";import{I as F}from"./InboxOutlined.bc0746ab.js";import{Q as j}from"./QqOutlined.035fc680.js";const z={pageData:{title:"Menu",description:"",frontmatter:{category:"Components",cols:1,type:"\u5BFC\u822A",title:"Menu",subtitle:"\u5BFC\u822A\u83DC\u5355",cover:"https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg"},headers:[{level:2,title:"\u4F55\u65F6\u4F7F\u7528",slug:"\u4F55\u65F6\u4F7F\u7528",content:"\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002"},{level:2,title:"\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879",slug:"\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879",content:""},{level:2,title:"API",slug:"API",content:""},{level:3,title:"Menu",slug:"Menu",content:""},{level:3,title:"Menu \u4E8B\u4EF6",slug:"Menu-\u4E8B\u4EF6",content:""},{level:3,title:"Menu.Item",slug:"Menu-Item",content:""},{level:3,title:"Menu.SubMenu",slug:"Menu-SubMenu",content:""},{level:3,title:"SubMenu \u4E8B\u4EF6",slug:"SubMenu-\u4E8B\u4EF6",content:""},{level:3,title:"Menu.ItemGroup",slug:"Menu-ItemGroup",content:""},{level:3,title:"Menu.Divider",slug:"Menu-Divider",content:"\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002"},{level:2,title:"FAQ",slug:"FAQ",content:"\u4E3A\u4F55 Menu \u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F"},{level:3,title:"\u4E3A\u4F55 Menu \u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F",slug:"\u4E3A\u4F55-Menu-\u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F",content:"Menu \u901A\u8FC7\u4E8C\u6B21\u6E32\u67D3\u6536\u96C6\u5D4C\u5957\u7ED3\u6784\u4FE1\u606F\u4EE5\u652F\u6301 HOC \u7684\u7ED3\u6784\u3002\u5408\u5E76\u6210\u4E00\u4E2A\u63A8\u5BFC\u7ED3\u6784\u4F1A\u4F7F\u5F97\u903B\u8F91\u53D8\u5F97\u5341\u5206\u590D\u6742\uFF0C\u6B22\u8FCE PR \u4EE5\u534F\u52A9\u6539\u8FDB\u8BE5\u8BBE\u8BA1\u3002"}],relativePath:"components/menu/index.zh-CN.md",content:`
\u4E3A\u9875\u9762\u548C\u529F\u80FD\u63D0\u4F9B\u5BFC\u822A\u7684\u83DC\u5355\u5217\u8868\u3002

## \u4F55\u65F6\u4F7F\u7528

\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002

\u66F4\u591A\u5E03\u5C40\u548C\u5BFC\u822A\u7684\u4F7F\u7528\u53EF\u4EE5\u53C2\u8003\uFF1A[\u901A\u7528\u5E03\u5C40](/components/layout-cn)\u3002

## \u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879

- Menu \u5143\u7D20\u4E3A \`ul\`\uFF0C\u56E0\u800C\u4EC5\u652F\u6301 [\`li\` \u4EE5\u53CA \`script-supporting\` \u5B50\u5143\u7D20](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element)\u3002\u56E0\u800C\u4F60\u7684\u5B50\u8282\u70B9\u5143\u7D20\u5E94\u8BE5\u90FD\u5728 \`Menu.Item\` \u5185\u4F7F\u7528\u3002
- Menu \u9700\u8981\u8BA1\u7B97\u8282\u70B9\u7ED3\u6784\uFF0C\u56E0\u800C\u5176\u5B50\u5143\u7D20\u4EC5\u652F\u6301 \`Menu.*\` \u4EE5\u53CA\u5BF9\u6B64\u8FDB\u884C\u5C01\u88C5\u7684 HOC \u7EC4\u4EF6\u3002
- \u5FC5\u987B\u4E3A SubMenu \u8BBE\u7F6E\u552F\u4E00 key

## API

\`\`\`html
<template>
  <a-menu>
    <a-menu-item>\u83DC\u5355\u9879</a-menu-item>
    <a-sub-menu key="sub1" title="\u5B50\u83DC\u5355">
      <a-menu-item>\u5B50\u83DC\u5355\u9879</a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
\`\`\`

### Menu

| \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C |
| --- | --- | --- | --- |
| forceSubMenuRender | \u5728\u5B50\u83DC\u5355\u5C55\u793A\u4E4B\u524D\u5C31\u6E32\u67D3\u8FDB DOM | boolean | false |
| inlineCollapsed | inline \u65F6\u83DC\u5355\u662F\u5426\u6536\u8D77\u72B6\u6001 | boolean | - |
| inlineIndent | inline \u6A21\u5F0F\u7684\u83DC\u5355\u7F29\u8FDB\u5BBD\u5EA6 | number | 24 |
| mode | \u83DC\u5355\u7C7B\u578B\uFF0C\u73B0\u5728\u652F\u6301\u5782\u76F4\u3001\u6C34\u5E73\u3001\u548C\u5185\u5D4C\u6A21\u5F0F\u4E09\u79CD | \`vertical\` \\| \`horizontal\` \\| \`inline\` | \`vertical\` |
| multiple | \u662F\u5426\u5141\u8BB8\u591A\u9009 | boolean | false |
| openKeys(v-model) | \u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4 | string\\[] |  |
| overflowedIndicator | \u7528\u4E8E\u81EA\u5B9A\u4E49 Menu \u6C34\u5E73\u7A7A\u95F4\u4E0D\u8DB3\u65F6\u7684\u7701\u7565\u6536\u7F29\u7684\u56FE\u6807 | slot | \`<EllipsisOutlined />\` |
| selectable | \u662F\u5426\u5141\u8BB8\u9009\u4E2D | boolean | true |
| selectedKeys(v-model) | \u5F53\u524D\u9009\u4E2D\u7684\u83DC\u5355\u9879 key \u6570\u7EC4 | string\\[] |  |
| subMenuCloseDelay | \u7528\u6237\u9F20\u6807\u79BB\u5F00\u5B50\u83DC\u5355\u540E\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2 | number | 0.1 |
| subMenuOpenDelay | \u7528\u6237\u9F20\u6807\u8FDB\u5165\u5B50\u83DC\u5355\u540E\u5F00\u542F\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2 | number | 0 |
| theme | \u4E3B\u9898\u989C\u8272 | \`light\` \\| \`dark\` | \`light\` |
| triggerSubMenuAction | \u4FEE\u6539 Menu \u5B50\u83DC\u5355\u7684\u89E6\u53D1\u65B9\u5F0F | \`click\` \\| \`hover\` | \`hover\` |

### Menu \u4E8B\u4EF6

| \u4E8B\u4EF6\u540D\u79F0   | \u8BF4\u660E                               | \u56DE\u8C03\u53C2\u6570                              |
| ---------- | ---------------------------------- | ------------------------------------- |
| click      | \u70B9\u51FB MenuItem \u8C03\u7528\u6B64\u51FD\u6570           | function({ item, key, keyPath })      |
| deselect   | \u53D6\u6D88\u9009\u4E2D\u65F6\u8C03\u7528\uFF0C\u4EC5\u5728 multiple \u751F\u6548 | function({ item, key, selectedKeys }) |
| openChange | SubMenu \u5C55\u5F00/\u5173\u95ED\u7684\u56DE\u8C03            | function(openKeys: string\\[])         |
| select     | \u88AB\u9009\u4E2D\u65F6\u8C03\u7528                       | function({ item, key, selectedKeys }) |

### Menu.Item

| \u53C2\u6570     | \u8BF4\u660E                     | \u7C7B\u578B           | \u9ED8\u8BA4\u503C | \u7248\u672C  |
| -------- | ------------------------ | -------------- | ------ | ----- |
| disabled | \u662F\u5426\u7981\u7528                 | boolean        | false  |       |
| icon     | \u83DC\u5355\u56FE\u6807                 | slot           |        | 2.8.0 |
| key      | item \u7684\u552F\u4E00\u6807\u5FD7          | string         |        |       |
| title    | \u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898 | string \\| slot |        |       |

### Menu.SubMenu

| \u53C2\u6570           | \u8BF4\u660E                                 | \u7C7B\u578B              | \u9ED8\u8BA4\u503C   | \u7248\u672C  |
| -------------- | ------------------------------------ | ----------------- | -------- | ----- |
| disabled       | \u662F\u5426\u7981\u7528                             | boolean           | false    |       |
| expandIcon     | \u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807             | slot              | \u7BAD\u5934\u56FE\u6807 |       |
| icon           | \u83DC\u5355\u56FE\u6807                             | slot              |          | 2.8.0 |
| key            | \u552F\u4E00\u6807\u5FD7, \u5FC5\u586B                       | string            |          |       |
| popupClassName | \u5B50\u83DC\u5355\u6837\u5F0F                           | string            |          | 1.5.0 |
| popupOffset    | \u5B50\u83DC\u5355\u504F\u79FB\u91CF\uFF0C\`mode="inline"\` \u65F6\u65E0\u6548 | \\[number, number] | -        |       |
| title          | \u5B50\u83DC\u5355\u9879\u503C                           | string\\|slot      |          |       |

Menu.SubMenu \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F \`MenuItem\` \u6216\u8005 \`SubMenu\`.

\`SubMenu\` \u5FC5\u987B\u4F20\u9012 key\uFF0C\u5982\u4E0D\u4F20\u9012\uFF0C\u8BE5 SubMenu \u4E0B\u5B50\u5143\u7D20\u5C06\u63D0\u524D\u6E32\u67D3\uFF0C\u800C\u4E14\u90E8\u5206\u573A\u666F\u65E0\u6CD5\u8FDB\u884C\u6709\u6548\u9AD8\u4EAE\u3002

### SubMenu \u4E8B\u4EF6

| \u4E8B\u4EF6\u540D\u79F0   | \u8BF4\u660E           | \u56DE\u8C03\u53C2\u6570            |
| ---------- | -------------- | ------------------- |
| titleClick | \u70B9\u51FB\u5B50\u83DC\u5355\u6807\u9898 | ({ key, domEvent }) |

### Menu.ItemGroup

| \u53C2\u6570  | \u8BF4\u660E     | \u7C7B\u578B         | \u9ED8\u8BA4\u503C |
| ----- | -------- | ------------ | ------ |
| title | \u5206\u7EC4\u6807\u9898 | string\\|slot |        |

Menu.ItemGroup \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F \`MenuItem\`.

### Menu.Divider

\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002

| \u53C2\u6570   | \u8BF4\u660E     | \u7C7B\u578B    | \u9ED8\u8BA4\u503C | \u7248\u672C |
| ------ | -------- | ------- | ------ | ---- |
| dashed | \u662F\u5426\u865A\u7EBF | boolean | false  | 3.0  |

## FAQ

### \u4E3A\u4F55 Menu \u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F

Menu \u901A\u8FC7\u4E8C\u6B21\u6E32\u67D3\u6536\u96C6\u5D4C\u5957\u7ED3\u6784\u4FE1\u606F\u4EE5\u652F\u6301 HOC \u7684\u7ED3\u6784\u3002\u5408\u5E76\u6210\u4E00\u4E2A\u63A8\u5BFC\u7ED3\u6784\u4F1A\u4F7F\u5F97\u903B\u8F91\u53D8\u5F97\u5341\u5206\u590D\u6742\uFF0C\u6B22\u8FCE PR \u4EE5\u534F\u52A9\u6539\u8FDB\u8BE5\u8BBE\u8BA1\u3002
`,html:`<p>\u4E3A\u9875\u9762\u548C\u529F\u80FD\u63D0\u4F9B\u5BFC\u822A\u7684\u83DC\u5355\u5217\u8868\u3002</p>
<h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002</p>
<p>\u66F4\u591A\u5E03\u5C40\u548C\u5BFC\u822A\u7684\u4F7F\u7528\u53EF\u4EE5\u53C2\u8003\uFF1A<a href="/components/layout-cn">\u901A\u7528\u5E03\u5C40</a>\u3002</p>
<h2 id="\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879">\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879 <a class="header-anchor" href="#\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<ul>
<li>Menu \u5143\u7D20\u4E3A <code>ul</code>\uFF0C\u56E0\u800C\u4EC5\u652F\u6301 <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" target="_blank" rel="noopener noreferrer"><code>li</code> \u4EE5\u53CA <code>script-supporting</code> \u5B50\u5143\u7D20</a>\u3002\u56E0\u800C\u4F60\u7684\u5B50\u8282\u70B9\u5143\u7D20\u5E94\u8BE5\u90FD\u5728 <code>Menu.Item</code> \u5185\u4F7F\u7528\u3002</li>
<li>Menu \u9700\u8981\u8BA1\u7B97\u8282\u70B9\u7ED3\u6784\uFF0C\u56E0\u800C\u5176\u5B50\u5143\u7D20\u4EC5\u652F\u6301 <code>Menu.*</code> \u4EE5\u53CA\u5BF9\u6B64\u8FDB\u884C\u5C01\u88C5\u7684 HOC \u7EC4\u4EF6\u3002</li>
<li>\u5FC5\u987B\u4E3A SubMenu \u8BBE\u7F6E\u552F\u4E00 key</li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">></span></span>\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</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>sub1<span class="token punctuation">"</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>\u5B50\u83DC\u5355<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>a-menu-item</span><span class="token punctuation">></span></span>\u5B50\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="Menu">Menu <a class="header-anchor" href="#Menu">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>forceSubMenuRender</td>
<td>\u5728\u5B50\u83DC\u5355\u5C55\u793A\u4E4B\u524D\u5C31\u6E32\u67D3\u8FDB DOM</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>inlineCollapsed</td>
<td>inline \u65F6\u83DC\u5355\u662F\u5426\u6536\u8D77\u72B6\u6001</td>
<td>boolean</td>
<td>-</td>
</tr>
<tr>
<td>inlineIndent</td>
<td>inline \u6A21\u5F0F\u7684\u83DC\u5355\u7F29\u8FDB\u5BBD\u5EA6</td>
<td>number</td>
<td>24</td>
</tr>
<tr>
<td>mode</td>
<td>\u83DC\u5355\u7C7B\u578B\uFF0C\u73B0\u5728\u652F\u6301\u5782\u76F4\u3001\u6C34\u5E73\u3001\u548C\u5185\u5D4C\u6A21\u5F0F\u4E09\u79CD</td>
<td><code>vertical</code> | <code>horizontal</code> | <code>inline</code></td>
<td><code>vertical</code></td>
</tr>
<tr>
<td>multiple</td>
<td>\u662F\u5426\u5141\u8BB8\u591A\u9009</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>openKeys(v-model)</td>
<td>\u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>overflowedIndicator</td>
<td>\u7528\u4E8E\u81EA\u5B9A\u4E49 Menu \u6C34\u5E73\u7A7A\u95F4\u4E0D\u8DB3\u65F6\u7684\u7701\u7565\u6536\u7F29\u7684\u56FE\u6807</td>
<td>slot</td>
<td><code>&lt;EllipsisOutlined /&gt;</code></td>
</tr>
<tr>
<td>selectable</td>
<td>\u662F\u5426\u5141\u8BB8\u9009\u4E2D</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>selectedKeys(v-model)</td>
<td>\u5F53\u524D\u9009\u4E2D\u7684\u83DC\u5355\u9879 key \u6570\u7EC4</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>subMenuCloseDelay</td>
<td>\u7528\u6237\u9F20\u6807\u79BB\u5F00\u5B50\u83DC\u5355\u540E\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td>
<td>number</td>
<td>0.1</td>
</tr>
<tr>
<td>subMenuOpenDelay</td>
<td>\u7528\u6237\u9F20\u6807\u8FDB\u5165\u5B50\u83DC\u5355\u540E\u5F00\u542F\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>theme</td>
<td>\u4E3B\u9898\u989C\u8272</td>
<td><code>light</code> | <code>dark</code></td>
<td><code>light</code></td>
</tr>
<tr>
<td>triggerSubMenuAction</td>
<td>\u4FEE\u6539 Menu \u5B50\u83DC\u5355\u7684\u89E6\u53D1\u65B9\u5F0F</td>
<td><code>click</code> | <code>hover</code></td>
<td><code>hover</code></td>
</tr>
</tbody>
</table>
<h3 id="Menu-\u4E8B\u4EF6">Menu \u4E8B\u4EF6 <a class="header-anchor" href="#Menu-\u4E8B\u4EF6">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u4E8B\u4EF6\u540D\u79F0</th>
<th>\u8BF4\u660E</th>
<th>\u56DE\u8C03\u53C2\u6570</th>
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>\u70B9\u51FB MenuItem \u8C03\u7528\u6B64\u51FD\u6570</td>
<td>function({ item, key, keyPath })</td>
</tr>
<tr>
<td>deselect</td>
<td>\u53D6\u6D88\u9009\u4E2D\u65F6\u8C03\u7528\uFF0C\u4EC5\u5728 multiple \u751F\u6548</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
<tr>
<td>openChange</td>
<td>SubMenu \u5C55\u5F00/\u5173\u95ED\u7684\u56DE\u8C03</td>
<td>function(openKeys: string[])</td>
</tr>
<tr>
<td>select</td>
<td>\u88AB\u9009\u4E2D\u65F6\u8C03\u7528</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
</tbody>
</table>
<h3 id="Menu-Item">Menu.Item <a class="header-anchor" href="#Menu-Item">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>\u662F\u5426\u7981\u7528</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>\u83DC\u5355\u56FE\u6807</td>
<td>slot</td>
<td></td>
<td>2.8.0</td>
</tr>
<tr>
<td>key</td>
<td>item \u7684\u552F\u4E00\u6807\u5FD7</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>\u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898</td>
<td>string | slot</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="Menu-SubMenu">Menu.SubMenu <a class="header-anchor" href="#Menu-SubMenu">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>\u662F\u5426\u7981\u7528</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>expandIcon</td>
<td>\u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807</td>
<td>slot</td>
<td>\u7BAD\u5934\u56FE\u6807</td>
<td></td>
</tr>
<tr>
<td>icon</td>
<td>\u83DC\u5355\u56FE\u6807</td>
<td>slot</td>
<td></td>
<td>2.8.0</td>
</tr>
<tr>
<td>key</td>
<td>\u552F\u4E00\u6807\u5FD7, \u5FC5\u586B</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>popupClassName</td>
<td>\u5B50\u83DC\u5355\u6837\u5F0F</td>
<td>string</td>
<td></td>
<td>1.5.0</td>
</tr>
<tr>
<td>popupOffset</td>
<td>\u5B50\u83DC\u5355\u504F\u79FB\u91CF\uFF0C<code>mode=&quot;inline&quot;</code> \u65F6\u65E0\u6548</td>
<td>[number, number]</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>\u5B50\u83DC\u5355\u9879\u503C</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p>Menu.SubMenu \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code> \u6216\u8005 <code>SubMenu</code>.</p>
<p><code>SubMenu</code> \u5FC5\u987B\u4F20\u9012 key\uFF0C\u5982\u4E0D\u4F20\u9012\uFF0C\u8BE5 SubMenu \u4E0B\u5B50\u5143\u7D20\u5C06\u63D0\u524D\u6E32\u67D3\uFF0C\u800C\u4E14\u90E8\u5206\u573A\u666F\u65E0\u6CD5\u8FDB\u884C\u6709\u6548\u9AD8\u4EAE\u3002</p>
<h3 id="SubMenu-\u4E8B\u4EF6">SubMenu \u4E8B\u4EF6 <a class="header-anchor" href="#SubMenu-\u4E8B\u4EF6">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u4E8B\u4EF6\u540D\u79F0</th>
<th>\u8BF4\u660E</th>
<th>\u56DE\u8C03\u53C2\u6570</th>
</tr>
</thead>
<tbody>
<tr>
<td>titleClick</td>
<td>\u70B9\u51FB\u5B50\u83DC\u5355\u6807\u9898</td>
<td>({ key, domEvent })</td>
</tr>
</tbody>
</table>
<h3 id="Menu-ItemGroup">Menu.ItemGroup <a class="header-anchor" href="#Menu-ItemGroup">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
</tr>
</thead>
<tbody>
<tr>
<td>title</td>
<td>\u5206\u7EC4\u6807\u9898</td>
<td>string|slot</td>
<td></td>
</tr>
</tbody>
</table>
<p>Menu.ItemGroup \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code>.</p>
<h3 id="Menu-Divider">Menu.Divider <a class="header-anchor" href="#Menu-Divider">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002</p>
<table>
<thead>
<tr>
<th>\u53C2\u6570</th>
<th>\u8BF4\u660E</th>
<th>\u7C7B\u578B</th>
<th>\u9ED8\u8BA4\u503C</th>
<th>\u7248\u672C</th>
</tr>
</thead>
<tbody>
<tr>
<td>dashed</td>
<td>\u662F\u5426\u865A\u7EBF</td>
<td>boolean</td>
<td>false</td>
<td>3.0</td>
</tr>
</tbody>
</table>
<h2 id="FAQ">FAQ <a class="header-anchor" href="#FAQ">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="\u4E3A\u4F55-Menu-\u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F">\u4E3A\u4F55 Menu \u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F <a class="header-anchor" href="#\u4E3A\u4F55-Menu-\u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>Menu \u901A\u8FC7\u4E8C\u6B21\u6E32\u67D3\u6536\u96C6\u5D4C\u5957\u7ED3\u6784\u4FE1\u606F\u4EE5\u652F\u6301 HOC \u7684\u7ED3\u6784\u3002\u5408\u5E76\u6210\u4E00\u4E2A\u63A8\u5BFC\u7ED3\u6784\u4F1A\u4F7F\u5F97\u903B\u8F91\u53D8\u5F97\u5341\u5206\u590D\u6742\uFF0C\u6B22\u8FCE PR \u4EE5\u534F\u52A9\u6539\u8FDB\u8BE5\u8BBE\u8BA1\u3002</p>
`,lastUpdated:1748060300918}},q={class:"markdown"};function E(o,a,k,g,I,Z){return d(),R("article",q,a[0]||(a[0]=[Y(`<p>\u4E3A\u9875\u9762\u548C\u529F\u80FD\u63D0\u4F9B\u5BFC\u822A\u7684\u83DC\u5355\u5217\u8868\u3002</p><h2 id="\u4F55\u65F6\u4F7F\u7528">\u4F55\u65F6\u4F7F\u7528 <a class="header-anchor" href="#\u4F55\u65F6\u4F7F\u7528"><span aria-hidden="true" class="anchor">#</span></a></h2><p>\u5BFC\u822A\u83DC\u5355\u662F\u4E00\u4E2A\u7F51\u7AD9\u7684\u7075\u9B42\uFF0C\u7528\u6237\u4F9D\u8D56\u5BFC\u822A\u5728\u5404\u4E2A\u9875\u9762\u4E2D\u8FDB\u884C\u8DF3\u8F6C\u3002\u4E00\u822C\u5206\u4E3A\u9876\u90E8\u5BFC\u822A\u548C\u4FA7\u8FB9\u5BFC\u822A\uFF0C\u9876\u90E8\u5BFC\u822A\u63D0\u4F9B\u5168\u5C40\u6027\u7684\u7C7B\u76EE\u548C\u529F\u80FD\uFF0C\u4FA7\u8FB9\u5BFC\u822A\u63D0\u4F9B\u591A\u7EA7\u7ED3\u6784\u6765\u6536\u7EB3\u548C\u6392\u5217\u7F51\u7AD9\u67B6\u6784\u3002</p><p>\u66F4\u591A\u5E03\u5C40\u548C\u5BFC\u822A\u7684\u4F7F\u7528\u53EF\u4EE5\u53C2\u8003\uFF1A<a href="/components/layout-cn">\u901A\u7528\u5E03\u5C40</a>\u3002</p><h2 id="\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879">\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879 <a class="header-anchor" href="#\u5F00\u53D1\u8005\u6CE8\u610F\u4E8B\u9879"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li>Menu \u5143\u7D20\u4E3A <code>ul</code>\uFF0C\u56E0\u800C\u4EC5\u652F\u6301 <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" target="_blank" rel="noopener noreferrer"><code>li</code> \u4EE5\u53CA <code>script-supporting</code> \u5B50\u5143\u7D20</a>\u3002\u56E0\u800C\u4F60\u7684\u5B50\u8282\u70B9\u5143\u7D20\u5E94\u8BE5\u90FD\u5728 <code>Menu.Item</code> \u5185\u4F7F\u7528\u3002</li><li>Menu \u9700\u8981\u8BA1\u7B97\u8282\u70B9\u7ED3\u6784\uFF0C\u56E0\u800C\u5176\u5B50\u5143\u7D20\u4EC5\u652F\u6301 <code>Menu.*</code> \u4EE5\u53CA\u5BF9\u6B64\u8FDB\u884C\u5C01\u88C5\u7684 HOC \u7EC4\u4EF6\u3002</li><li>\u5FC5\u987B\u4E3A SubMenu \u8BBE\u7F6E\u552F\u4E00 key</li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sub1<span class="token punctuation">&quot;</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">&quot;</span>\u5B50\u83DC\u5355<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>\u5B50\u83DC\u5355\u9879<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre><h3 id="Menu">Menu <a class="header-anchor" href="#Menu"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>forceSubMenuRender</td><td>\u5728\u5B50\u83DC\u5355\u5C55\u793A\u4E4B\u524D\u5C31\u6E32\u67D3\u8FDB DOM</td><td>boolean</td><td>false</td></tr><tr><td>inlineCollapsed</td><td>inline \u65F6\u83DC\u5355\u662F\u5426\u6536\u8D77\u72B6\u6001</td><td>boolean</td><td>-</td></tr><tr><td>inlineIndent</td><td>inline \u6A21\u5F0F\u7684\u83DC\u5355\u7F29\u8FDB\u5BBD\u5EA6</td><td>number</td><td>24</td></tr><tr><td>mode</td><td>\u83DC\u5355\u7C7B\u578B\uFF0C\u73B0\u5728\u652F\u6301\u5782\u76F4\u3001\u6C34\u5E73\u3001\u548C\u5185\u5D4C\u6A21\u5F0F\u4E09\u79CD</td><td><code>vertical</code> | <code>horizontal</code> | <code>inline</code></td><td><code>vertical</code></td></tr><tr><td>multiple</td><td>\u662F\u5426\u5141\u8BB8\u591A\u9009</td><td>boolean</td><td>false</td></tr><tr><td>openKeys(v-model)</td><td>\u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4</td><td>string[]</td><td></td></tr><tr><td>overflowedIndicator</td><td>\u7528\u4E8E\u81EA\u5B9A\u4E49 Menu \u6C34\u5E73\u7A7A\u95F4\u4E0D\u8DB3\u65F6\u7684\u7701\u7565\u6536\u7F29\u7684\u56FE\u6807</td><td>slot</td><td><code>&lt;EllipsisOutlined /&gt;</code></td></tr><tr><td>selectable</td><td>\u662F\u5426\u5141\u8BB8\u9009\u4E2D</td><td>boolean</td><td>true</td></tr><tr><td>selectedKeys(v-model)</td><td>\u5F53\u524D\u9009\u4E2D\u7684\u83DC\u5355\u9879 key \u6570\u7EC4</td><td>string[]</td><td></td></tr><tr><td>subMenuCloseDelay</td><td>\u7528\u6237\u9F20\u6807\u79BB\u5F00\u5B50\u83DC\u5355\u540E\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td><td>number</td><td>0.1</td></tr><tr><td>subMenuOpenDelay</td><td>\u7528\u6237\u9F20\u6807\u8FDB\u5165\u5B50\u83DC\u5355\u540E\u5F00\u542F\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2</td><td>number</td><td>0</td></tr><tr><td>theme</td><td>\u4E3B\u9898\u989C\u8272</td><td><code>light</code> | <code>dark</code></td><td><code>light</code></td></tr><tr><td>triggerSubMenuAction</td><td>\u4FEE\u6539 Menu \u5B50\u83DC\u5355\u7684\u89E6\u53D1\u65B9\u5F0F</td><td><code>click</code> | <code>hover</code></td><td><code>hover</code></td></tr></tbody></table><h3 id="Menu-\u4E8B\u4EF6">Menu \u4E8B\u4EF6 <a class="header-anchor" href="#Menu-\u4E8B\u4EF6"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>click</td><td>\u70B9\u51FB MenuItem \u8C03\u7528\u6B64\u51FD\u6570</td><td>function({ item, key, keyPath })</td></tr><tr><td>deselect</td><td>\u53D6\u6D88\u9009\u4E2D\u65F6\u8C03\u7528\uFF0C\u4EC5\u5728 multiple \u751F\u6548</td><td>function({ item, key, selectedKeys })</td></tr><tr><td>openChange</td><td>SubMenu \u5C55\u5F00/\u5173\u95ED\u7684\u56DE\u8C03</td><td>function(openKeys: string[])</td></tr><tr><td>select</td><td>\u88AB\u9009\u4E2D\u65F6\u8C03\u7528</td><td>function({ item, key, selectedKeys })</td></tr></tbody></table><h3 id="Menu-Item">Menu.Item <a class="header-anchor" href="#Menu-Item"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528</td><td>boolean</td><td>false</td><td></td></tr><tr><td>icon</td><td>\u83DC\u5355\u56FE\u6807</td><td>slot</td><td></td><td>2.8.0</td></tr><tr><td>key</td><td>item \u7684\u552F\u4E00\u6807\u5FD7</td><td>string</td><td></td><td></td></tr><tr><td>title</td><td>\u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898</td><td>string | slot</td><td></td><td></td></tr></tbody></table><h3 id="Menu-SubMenu">Menu.SubMenu <a class="header-anchor" href="#Menu-SubMenu"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>disabled</td><td>\u662F\u5426\u7981\u7528</td><td>boolean</td><td>false</td><td></td></tr><tr><td>expandIcon</td><td>\u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807</td><td>slot</td><td>\u7BAD\u5934\u56FE\u6807</td><td></td></tr><tr><td>icon</td><td>\u83DC\u5355\u56FE\u6807</td><td>slot</td><td></td><td>2.8.0</td></tr><tr><td>key</td><td>\u552F\u4E00\u6807\u5FD7, \u5FC5\u586B</td><td>string</td><td></td><td></td></tr><tr><td>popupClassName</td><td>\u5B50\u83DC\u5355\u6837\u5F0F</td><td>string</td><td></td><td>1.5.0</td></tr><tr><td>popupOffset</td><td>\u5B50\u83DC\u5355\u504F\u79FB\u91CF\uFF0C<code>mode=&quot;inline&quot;</code> \u65F6\u65E0\u6548</td><td>[number, number]</td><td>-</td><td></td></tr><tr><td>title</td><td>\u5B50\u83DC\u5355\u9879\u503C</td><td>string|slot</td><td></td><td></td></tr></tbody></table><p>Menu.SubMenu \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code> \u6216\u8005 <code>SubMenu</code>.</p><p><code>SubMenu</code> \u5FC5\u987B\u4F20\u9012 key\uFF0C\u5982\u4E0D\u4F20\u9012\uFF0C\u8BE5 SubMenu \u4E0B\u5B50\u5143\u7D20\u5C06\u63D0\u524D\u6E32\u67D3\uFF0C\u800C\u4E14\u90E8\u5206\u573A\u666F\u65E0\u6CD5\u8FDB\u884C\u6709\u6548\u9AD8\u4EAE\u3002</p><h3 id="SubMenu-\u4E8B\u4EF6">SubMenu \u4E8B\u4EF6 <a class="header-anchor" href="#SubMenu-\u4E8B\u4EF6"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u4E8B\u4EF6\u540D\u79F0</th><th>\u8BF4\u660E</th><th>\u56DE\u8C03\u53C2\u6570</th></tr></thead><tbody><tr><td>titleClick</td><td>\u70B9\u51FB\u5B50\u83DC\u5355\u6807\u9898</td><td>({ key, domEvent })</td></tr></tbody></table><h3 id="Menu-ItemGroup">Menu.ItemGroup <a class="header-anchor" href="#Menu-ItemGroup"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th></tr></thead><tbody><tr><td>title</td><td>\u5206\u7EC4\u6807\u9898</td><td>string|slot</td><td></td></tr></tbody></table><p>Menu.ItemGroup \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F <code>MenuItem</code>.</p><h3 id="Menu-Divider">Menu.Divider <a class="header-anchor" href="#Menu-Divider"><span aria-hidden="true" class="anchor">#</span></a></h3><p>\u83DC\u5355\u9879\u5206\u5272\u7EBF\uFF0C\u53EA\u7528\u5728\u5F39\u51FA\u83DC\u5355\u5185\u3002</p><table><thead><tr><th>\u53C2\u6570</th><th>\u8BF4\u660E</th><th>\u7C7B\u578B</th><th>\u9ED8\u8BA4\u503C</th><th>\u7248\u672C</th></tr></thead><tbody><tr><td>dashed</td><td>\u662F\u5426\u865A\u7EBF</td><td>boolean</td><td>false</td><td>3.0</td></tr></tbody></table><h2 id="FAQ">FAQ <a class="header-anchor" href="#FAQ"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="\u4E3A\u4F55-Menu-\u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F">\u4E3A\u4F55 Menu \u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F <a class="header-anchor" href="#\u4E3A\u4F55-Menu-\u7684\u5B50\u5143\u7D20\u4F1A\u6E32\u67D3\u4E24\u6B21\uFF1F"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Menu \u901A\u8FC7\u4E8C\u6B21\u6E32\u67D3\u6536\u96C6\u5D4C\u5957\u7ED3\u6784\u4FE1\u606F\u4EE5\u652F\u6301 HOC \u7684\u7ED3\u6784\u3002\u5408\u5E76\u6210\u4E00\u4E2A\u63A8\u5BFC\u7ED3\u6784\u4F1A\u4F7F\u5F97\u903B\u8F91\u53D8\u5F97\u5341\u5206\u590D\u6742\uFF0C\u6B22\u8FCE PR \u4EE5\u534F\u52A9\u6539\u8FDB\u8BE5\u8BBE\u8BA1\u3002</p>`,29)]))}const J=y(z,[["render",E]]),Q={pageData:{title:"Menu",description:"",frontmatter:{category:"Components",cols:1,type:"Navigation",title:"Menu",cover:"https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg"},headers:[{level:2,title:"When To Use",slug:"When-To-Use",content:"Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website."},{level:2,title:"Notes for developers",slug:"Notes-for-developers",content:""},{level:2,title:"API",slug:"API",content:""},{level:3,title:"Menu",slug:"Menu",content:""},{level:3,title:"Menu Events",slug:"Menu-Events",content:""},{level:3,title:"Menu.Item",slug:"Menu-Item",content:""},{level:3,title:"Menu.SubMenu",slug:"Menu-SubMenu",content:""},{level:3,title:"Menu.SubMenu Events",slug:"Menu-SubMenu-Events",content:""},{level:3,title:"Menu.ItemGroup",slug:"Menu-ItemGroup",content:""},{level:3,title:"Menu.Divider",slug:"Menu-Divider",content:"Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu."},{level:2,title:"FAQ",slug:"FAQ",content:"Why will Menu's children be rendered twice?"},{level:3,title:"Why will Menu's children be rendered twice?",slug:"Why-will-Menu-s-children-be-rendered-twice",content:"Menu collects structure info with twice-render to support HOC usage. Merging into one render may cause the logic to become much more complex. Contributions to help improve the collection logic are welcomed."}],relativePath:"components/menu/index.en-US.md",content:`
A versatile menu for navigation.

## When To Use

Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.

More layouts with navigation: [Layout](/components/layout).

## Notes for developers

- Menu is rendered as a \`ul\` element, so it only supports [\`li\` and \`script-supporting\` elements](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element) as children nodes\u3002Your customized node should be wrapped by \`Menu.Item\`.
- Menu needs to collect its node structure, so its children should be \`Menu.*\` or encapsulated HOCs.
- Must set unique key for \`SubMenu\`

## API

\`\`\`html
&lt;template&gt;
  &lt;a-menu&gt;
    &lt;a-menu-item&gt;Menu&lt;/a-menu-item&gt;
    &lt;a-sub-menu key=&quot;sub1&quot; title=&quot;SubMenu&quot;&gt;
      &lt;a-menu-item&gt;SubMenuItem&lt;/a-menu-item&gt;
    &lt;/a-sub-menu&gt;
  &lt;/a-menu&gt;
&lt;/template&gt;
\`\`\`

### Menu

| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| forceSubMenuRender | render submenu into DOM before it shows | boolean | false |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
| inlineIndent | indent px of inline menu item on each level | number | 24 |
| mode | type of the menu; \`vertical\`, \`horizontal\`, and \`inline\` modes are supported | \`vertical\` \\| \`horizontal\` \\| \`inline\` | \`vertical\` |
| multiple | Allow selection of multiple items | boolean | false |
| openKeys(v-model) | array with the keys of currently opened sub menus | string\\[] |  |
| overflowedIndicator | Customized the ellipsis icon when menu is collapsed horizontally | slot | \`&lt;EllipsisOutlined /&gt;\` |
| selectable | allow selecting menu items | boolean | true |
| selectedKeys(v-model) | array with the keys of currently selected menu items | string\\[] |  |
| style | style of the root node | object |  |
| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 |
| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 |
| theme | color theme of the menu | \`light\` \\| \`dark\` | \`light\` |
| triggerSubMenuAction | method of trigger submenu | \`click\` \\| \`hover\` | \`hover\` |

### Menu Events

| Events Name | Description | Arguments |
| --- | --- | --- |
| click | callback executed when a menu item is clicked | function({ item, key, keyPath }) |
| deselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, selectedKeys }) |
| openChange | called when open/close sub menu | function(openKeys: string\\[]) |
| select | callback executed when a menu item is selected | function({ item, key, selectedKeys }) |

### Menu.Item

| Param    | Description                          | Type           | Default value |
| -------- | ------------------------------------ | -------------- | ------------- |
| disabled | whether menu item is disabled or not | boolean        | false         |
| key      | unique id of the menu item           | string         |               |
| title    | set display title for collapsed item | string \\| slot |               |

### Menu.SubMenu

| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| disabled | whether sub menu is disabled or not | boolean | false |  |
| expandIcon | Customized expandIcon | slot | arrow icon | \uFF5C |
| key | Unique ID of the sub menu, required | string |  |  |
| popupClassName | Sub-menu class name | string |  | 1.5.0 |
| popupOffset | Sub-menu offset, not working when \`mode=&quot;inline&quot;\` | \\[number, number] | - |  |
| title | title of the sub menu | string\\|slot |  |  |

The children of Menu.SubMenu must be \`MenuItem\` or \`SubMenu\`.

\`SubMenu\` must pass the key. If it is not passed, the sub-elements under the SubMenu will be rendered in advance, and some scenes cannot be effectively highlighted.

### Menu.SubMenu Events

| Events Name | Description                                          | Arguments                   |
| ----------- | ---------------------------------------------------- | --------------------------- |
| titleClick  | callback executed when the sub menu title is clicked | function({ key, domEvent }) |

### Menu.ItemGroup

| Param    | Description        | Type         | Default value |
| -------- | ------------------ | ------------ | ------------- |
| children | sub-menu items     | MenuItem\\[]  |               |
| title    | title of the group | string\\|slot |               |

The children of Menu.ItemGroup must be \`MenuItem\`.

### Menu.Divider

Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.

| Param  | Description            | Type    | Default value | Version |
| ------ | ---------------------- | ------- | ------------- | ------- |
| dashed | Whether line is dashed | boolean | false         | 4.17.0  |

## FAQ

### Why will Menu&#39;s children be rendered twice?

Menu collects structure info with twice-render to support HOC usage. Merging into one render may cause the logic to become much more complex. Contributions to help improve the collection logic are welcomed.
`,html:`<p>A versatile menu for navigation.</p>
<h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.</p>
<p>More layouts with navigation: <a href="/components/layout">Layout</a>.</p>
<h2 id="Notes-for-developers">Notes for developers <a class="header-anchor" href="#Notes-for-developers">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<ul>
<li>Menu is rendered as a <code>ul</code> element, so it only supports <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" target="_blank" rel="noopener noreferrer"><code>li</code> and <code>script-supporting</code> elements</a> as children nodes\u3002Your customized node should be wrapped by <code>Menu.Item</code>.</li>
<li>Menu needs to collect its node structure, so its children should be <code>Menu.*</code> or encapsulated HOCs.</li>
<li>Must set unique key for <code>SubMenu</code></li>
</ul>
<h2 id="API">API <a class="header-anchor" href="#API">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<pre class="language-html" v-pre><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">></span></span>Menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</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>sub1<span class="token punctuation">"</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>SubMenu<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>a-menu-item</span><span class="token punctuation">></span></span>SubMenuItem<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
</code></pre>
<h3 id="Menu">Menu <a class="header-anchor" href="#Menu">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>forceSubMenuRender</td>
<td>render submenu into DOM before it shows</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>inlineCollapsed</td>
<td>specifies the collapsed status when menu is inline mode</td>
<td>boolean</td>
<td>-</td>
</tr>
<tr>
<td>inlineIndent</td>
<td>indent px of inline menu item on each level</td>
<td>number</td>
<td>24</td>
</tr>
<tr>
<td>mode</td>
<td>type of the menu; <code>vertical</code>, <code>horizontal</code>, and <code>inline</code> modes are supported</td>
<td><code>vertical</code> | <code>horizontal</code> | <code>inline</code></td>
<td><code>vertical</code></td>
</tr>
<tr>
<td>multiple</td>
<td>Allow selection of multiple items</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>openKeys(v-model)</td>
<td>array with the keys of currently opened sub menus</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>overflowedIndicator</td>
<td>Customized the ellipsis icon when menu is collapsed horizontally</td>
<td>slot</td>
<td><code>&lt;EllipsisOutlined /&gt;</code></td>
</tr>
<tr>
<td>selectable</td>
<td>allow selecting menu items</td>
<td>boolean</td>
<td>true</td>
</tr>
<tr>
<td>selectedKeys(v-model)</td>
<td>array with the keys of currently selected menu items</td>
<td>string[]</td>
<td></td>
</tr>
<tr>
<td>style</td>
<td>style of the root node</td>
<td>object</td>
<td></td>
</tr>
<tr>
<td>subMenuCloseDelay</td>
<td>delay time to hide submenu when mouse leave, unit: second</td>
<td>number</td>
<td>0.1</td>
</tr>
<tr>
<td>subMenuOpenDelay</td>
<td>delay time to show submenu when mouse enter, unit: second</td>
<td>number</td>
<td>0</td>
</tr>
<tr>
<td>theme</td>
<td>color theme of the menu</td>
<td><code>light</code> | <code>dark</code></td>
<td><code>light</code></td>
</tr>
<tr>
<td>triggerSubMenuAction</td>
<td>method of trigger submenu</td>
<td><code>click</code> | <code>hover</code></td>
<td><code>hover</code></td>
</tr>
</tbody>
</table>
<h3 id="Menu-Events">Menu Events <a class="header-anchor" href="#Menu-Events">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Events Name</th>
<th>Description</th>
<th>Arguments</th>
</tr>
</thead>
<tbody>
<tr>
<td>click</td>
<td>callback executed when a menu item is clicked</td>
<td>function({ item, key, keyPath })</td>
</tr>
<tr>
<td>deselect</td>
<td>callback executed when a menu item is deselected, only supported for multiple mode</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
<tr>
<td>openChange</td>
<td>called when open/close sub menu</td>
<td>function(openKeys: string[])</td>
</tr>
<tr>
<td>select</td>
<td>callback executed when a menu item is selected</td>
<td>function({ item, key, selectedKeys })</td>
</tr>
</tbody>
</table>
<h3 id="Menu-Item">Menu.Item <a class="header-anchor" href="#Menu-Item">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>whether menu item is disabled or not</td>
<td>boolean</td>
<td>false</td>
</tr>
<tr>
<td>key</td>
<td>unique id of the menu item</td>
<td>string</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>set display title for collapsed item</td>
<td>string | slot</td>
<td></td>
</tr>
</tbody>
</table>
<h3 id="Menu-SubMenu">Menu.SubMenu <a class="header-anchor" href="#Menu-SubMenu">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>disabled</td>
<td>whether sub menu is disabled or not</td>
<td>boolean</td>
<td>false</td>
<td></td>
</tr>
<tr>
<td>expandIcon</td>
<td>Customized expandIcon</td>
<td>slot</td>
<td>arrow icon</td>
<td>\uFF5C</td>
</tr>
<tr>
<td>key</td>
<td>Unique ID of the sub menu, required</td>
<td>string</td>
<td></td>
<td></td>
</tr>
<tr>
<td>popupClassName</td>
<td>Sub-menu class name</td>
<td>string</td>
<td></td>
<td>1.5.0</td>
</tr>
<tr>
<td>popupOffset</td>
<td>Sub-menu offset, not working when <code>mode=&quot;inline&quot;</code></td>
<td>[number, number]</td>
<td>-</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>title of the sub menu</td>
<td>string|slot</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<p>The children of Menu.SubMenu must be <code>MenuItem</code> or <code>SubMenu</code>.</p>
<p><code>SubMenu</code> must pass the key. If it is not passed, the sub-elements under the SubMenu will be rendered in advance, and some scenes cannot be effectively highlighted.</p>
<h3 id="Menu-SubMenu-Events">Menu.SubMenu Events <a class="header-anchor" href="#Menu-SubMenu-Events">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Events Name</th>
<th>Description</th>
<th>Arguments</th>
</tr>
</thead>
<tbody>
<tr>
<td>titleClick</td>
<td>callback executed when the sub menu title is clicked</td>
<td>function({ key, domEvent })</td>
</tr>
</tbody>
</table>
<h3 id="Menu-ItemGroup">Menu.ItemGroup <a class="header-anchor" href="#Menu-ItemGroup">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td>children</td>
<td>sub-menu items</td>
<td>MenuItem[]</td>
<td></td>
</tr>
<tr>
<td>title</td>
<td>title of the group</td>
<td>string|slot</td>
<td></td>
</tr>
</tbody>
</table>
<p>The children of Menu.ItemGroup must be <code>MenuItem</code>.</p>
<h3 id="Menu-Divider">Menu.Divider <a class="header-anchor" href="#Menu-Divider">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.</p>
<table>
<thead>
<tr>
<th>Param</th>
<th>Description</th>
<th>Type</th>
<th>Default value</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>dashed</td>
<td>Whether line is dashed</td>
<td>boolean</td>
<td>false</td>
<td>4.17.0</td>
</tr>
</tbody>
</table>
<h2 id="FAQ">FAQ <a class="header-anchor" href="#FAQ">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<h3 id="Why-will-Menu-s-children-be-rendered-twice">Why will Menu's children be rendered twice? <a class="header-anchor" href="#Why-will-Menu-s-children-be-rendered-twice">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h3>
<p>Menu collects structure info with twice-render to support HOC usage. Merging into one render may cause the logic to become much more complex. Contributions to help improve the collection logic are welcomed.</p>
`,lastUpdated:1748060300917}},_={class:"markdown"};function $(o,a,k,g,I,Z){return d(),R("article",_,a[0]||(a[0]=[Y(`<p>A versatile menu for navigation.</p><h2 id="When-To-Use">When To Use <a class="header-anchor" href="#When-To-Use"><span aria-hidden="true" class="anchor">#</span></a></h2><p>Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.</p><p>More layouts with navigation: <a href="/components/layout">Layout</a>.</p><h2 id="Notes-for-developers">Notes for developers <a class="header-anchor" href="#Notes-for-developers"><span aria-hidden="true" class="anchor">#</span></a></h2><ul><li>Menu is rendered as a <code>ul</code> element, so it only supports <a href="https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element" target="_blank" rel="noopener noreferrer"><code>li</code> and <code>script-supporting</code> elements</a> as children nodes\u3002Your customized node should be wrapped by <code>Menu.Item</code>.</li><li>Menu needs to collect its node structure, so its children should be <code>Menu.*</code> or encapsulated HOCs.</li><li>Must set unique key for <code>SubMenu</code></li></ul><h2 id="API">API <a class="header-anchor" href="#API"><span aria-hidden="true" class="anchor">#</span></a></h2><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>Menu<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-sub-menu</span> <span class="token attr-name">key</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>sub1<span class="token punctuation">&quot;</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">&quot;</span>SubMenu<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>SubMenuItem<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu-item</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-sub-menu</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a-menu</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre><h3 id="Menu">Menu <a class="header-anchor" href="#Menu"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th></tr></thead><tbody><tr><td>forceSubMenuRender</td><td>render submenu into DOM before it shows</td><td>boolean</td><td>false</td></tr><tr><td>inlineCollapsed</td><td>specifies the collapsed status when menu is inline mode</td><td>boolean</td><td>-</td></tr><tr><td>inlineIndent</td><td>indent px of inline menu item on each level</td><td>number</td><td>24</td></tr><tr><td>mode</td><td>type of the menu; <code>vertical</code>, <code>horizontal</code>, and <code>inline</code> modes are supported</td><td><code>vertical</code> | <code>horizontal</code> | <code>inline</code></td><td><code>vertical</code></td></tr><tr><td>multiple</td><td>Allow selection of multiple items</td><td>boolean</td><td>false</td></tr><tr><td>openKeys(v-model)</td><td>array with the keys of currently opened sub menus</td><td>string[]</td><td></td></tr><tr><td>overflowedIndicator</td><td>Customized the ellipsis icon when menu is collapsed horizontally</td><td>slot</td><td><code>&lt;EllipsisOutlined /&gt;</code></td></tr><tr><td>selectable</td><td>allow selecting menu items</td><td>boolean</td><td>true</td></tr><tr><td>selectedKeys(v-model)</td><td>array with the keys of currently selected menu items</td><td>string[]</td><td></td></tr><tr><td>style</td><td>style of the root node</td><td>object</td><td></td></tr><tr><td>subMenuCloseDelay</td><td>delay time to hide submenu when mouse leave, unit: second</td><td>number</td><td>0.1</td></tr><tr><td>subMenuOpenDelay</td><td>delay time to show submenu when mouse enter, unit: second</td><td>number</td><td>0</td></tr><tr><td>theme</td><td>color theme of the menu</td><td><code>light</code> | <code>dark</code></td><td><code>light</code></td></tr><tr><td>triggerSubMenuAction</td><td>method of trigger submenu</td><td><code>click</code> | <code>hover</code></td><td><code>hover</code></td></tr></tbody></table><h3 id="Menu-Events">Menu Events <a class="header-anchor" href="#Menu-Events"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th></tr></thead><tbody><tr><td>click</td><td>callback executed when a menu item is clicked</td><td>function({ item, key, keyPath })</td></tr><tr><td>deselect</td><td>callback executed when a menu item is deselected, only supported for multiple mode</td><td>function({ item, key, selectedKeys })</td></tr><tr><td>openChange</td><td>called when open/close sub menu</td><td>function(openKeys: string[])</td></tr><tr><td>select</td><td>callback executed when a menu item is selected</td><td>function({ item, key, selectedKeys })</td></tr></tbody></table><h3 id="Menu-Item">Menu.Item <a class="header-anchor" href="#Menu-Item"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th></tr></thead><tbody><tr><td>disabled</td><td>whether menu item is disabled or not</td><td>boolean</td><td>false</td></tr><tr><td>key</td><td>unique id of the menu item</td><td>string</td><td></td></tr><tr><td>title</td><td>set display title for collapsed item</td><td>string | slot</td><td></td></tr></tbody></table><h3 id="Menu-SubMenu">Menu.SubMenu <a class="header-anchor" href="#Menu-SubMenu"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th><th>Version</th></tr></thead><tbody><tr><td>disabled</td><td>whether sub menu is disabled or not</td><td>boolean</td><td>false</td><td></td></tr><tr><td>expandIcon</td><td>Customized expandIcon</td><td>slot</td><td>arrow icon</td><td>\uFF5C</td></tr><tr><td>key</td><td>Unique ID of the sub menu, required</td><td>string</td><td></td><td></td></tr><tr><td>popupClassName</td><td>Sub-menu class name</td><td>string</td><td></td><td>1.5.0</td></tr><tr><td>popupOffset</td><td>Sub-menu offset, not working when <code>mode=&quot;inline&quot;</code></td><td>[number, number]</td><td>-</td><td></td></tr><tr><td>title</td><td>title of the sub menu</td><td>string|slot</td><td></td><td></td></tr></tbody></table><p>The children of Menu.SubMenu must be <code>MenuItem</code> or <code>SubMenu</code>.</p><p><code>SubMenu</code> must pass the key. If it is not passed, the sub-elements under the SubMenu will be rendered in advance, and some scenes cannot be effectively highlighted.</p><h3 id="Menu-SubMenu-Events">Menu.SubMenu Events <a class="header-anchor" href="#Menu-SubMenu-Events"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Events Name</th><th>Description</th><th>Arguments</th></tr></thead><tbody><tr><td>titleClick</td><td>callback executed when the sub menu title is clicked</td><td>function({ key, domEvent })</td></tr></tbody></table><h3 id="Menu-ItemGroup">Menu.ItemGroup <a class="header-anchor" href="#Menu-ItemGroup"><span aria-hidden="true" class="anchor">#</span></a></h3><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th></tr></thead><tbody><tr><td>children</td><td>sub-menu items</td><td>MenuItem[]</td><td></td></tr><tr><td>title</td><td>title of the group</td><td>string|slot</td><td></td></tr></tbody></table><p>The children of Menu.ItemGroup must be <code>MenuItem</code>.</p><h3 id="Menu-Divider">Menu.Divider <a class="header-anchor" href="#Menu-Divider"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Divider line in between menu items, only used in vertical popup Menu or Dropdown Menu.</p><table><thead><tr><th>Param</th><th>Description</th><th>Type</th><th>Default value</th><th>Version</th></tr></thead><tbody><tr><td>dashed</td><td>Whether line is dashed</td><td>boolean</td><td>false</td><td>4.17.0</td></tr></tbody></table><h2 id="FAQ">FAQ <a class="header-anchor" href="#FAQ"><span aria-hidden="true" class="anchor">#</span></a></h2><h3 id="Why-will-Menu-s-children-be-rendered-twice">Why will Menu&#39;s children be rendered twice? <a class="header-anchor" href="#Why-will-Menu-s-children-be-rendered-twice"><span aria-hidden="true" class="anchor">#</span></a></h3><p>Menu collects structure info with twice-render to support HOC usage. Merging into one render may cause the logic to become much more complex. Contributions to help improve the collection logic are welcomed.</p>`,29)]))}const nn=y(Q,[["render",$]]),tn=v({components:{MailOutlined:G,AppstoreOutlined:V,SettingOutlined:S},setup(){return{current:w(["mail"])}}});function an(o,a,k,g,I,Z){const m=p("mail-outlined"),l=p("a-menu-item"),c=p("appstore-outlined"),C=p("setting-outlined"),u=p("a-menu-item-group"),r=p("a-sub-menu"),A=p("a-menu"),b=p("demo-box");return d(),h(b,{jsfiddle:{us:"Horizontal top navigation menu.",cn:"\u6C34\u5E73\u7684\u9876\u90E8\u5BFC\u822A\u83DC\u5355\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u6C34\u5E73\u7684\u9876\u90E8\u5BFC\u822A\u83DC\u5355\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Horizontal top navigation menu.</p>
`,order:0,title:{"zh-CN":"\u9876\u90E8\u5BFC\u822A","en-US":"Top Navigation"},relativePath:"components/menu/demo/horizontal.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUgdi1tb2RlbDpzZWxlY3RlZEtleXM9ImN1cnJlbnQiIG1vZGU9Imhvcml6b250YWwiPgogICAgPGEtbWVudS1pdGVtIGtleT0ibWFpbCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8bWFpbC1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIE9uZQogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFwcCIgZGlzYWJsZWQ+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8YXBwc3RvcmUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgTmF2aWdhdGlvbiBUd28KICAgIDwvYS1tZW51LWl0ZW0+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPHNldHRpbmctb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlIC0gU3VibWVudTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCB0aXRsZT0iSXRlbSAxIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjIiPk9wdGlvbiAyPC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLW1lbnUtaXRlbS1ncm91cD4KICAgICAgPGEtbWVudS1pdGVtLWdyb3VwIHRpdGxlPSJJdGVtIDIiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9InNldHRpbmc6MyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9InNldHRpbmc6NCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtbWVudS1pdGVtIGtleT0iYWxpcGF5Ij4KICAgICAgPGEgaHJlZj0iaHR0cHM6Ly9hbnRkdi5jb20iIHRhcmdldD0iX2JsYW5rIiByZWw9Im5vb3BlbmVyIG5vcmVmZXJyZXIiPgogICAgICAgIE5hdmlnYXRpb24gRm91ciAtIExpbmsKICAgICAgPC9hPgogICAgPC9hLW1lbnUtaXRlbT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IGN1cnJlbnQgPSByZWY8c3RyaW5nW10+KFsnbWFpbCddKTsKICAgIHJldHVybiB7CiAgICAgIGN1cnJlbnQsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUgdi1tb2RlbDpzZWxlY3RlZEtleXM9ImN1cnJlbnQiIG1vZGU9Imhvcml6b250YWwiPgogICAgPGEtbWVudS1pdGVtIGtleT0ibWFpbCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8bWFpbC1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIE9uZQogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFwcCIgZGlzYWJsZWQ+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8YXBwc3RvcmUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgTmF2aWdhdGlvbiBUd28KICAgIDwvYS1tZW51LWl0ZW0+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPHNldHRpbmctb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlIC0gU3VibWVudTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCB0aXRsZT0iSXRlbSAxIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjIiPk9wdGlvbiAyPC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLW1lbnUtaXRlbS1ncm91cD4KICAgICAgPGEtbWVudS1pdGVtLWdyb3VwIHRpdGxlPSJJdGVtIDIiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9InNldHRpbmc6MyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9InNldHRpbmc6NCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtbWVudS1pdGVtIGtleT0iYWxpcGF5Ij4KICAgICAgPGEgaHJlZj0iaHR0cHM6Ly9hbnRkdi5jb20iIHRhcmdldD0iX2JsYW5rIiByZWw9Im5vb3BlbmVyIG5vcmVmZXJyZXIiPgogICAgICAgIE5hdmlnYXRpb24gRm91ciAtIExpbmsKICAgICAgPC9hPgogICAgPC9hLW1lbnUtaXRlbT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBNYWlsT3V0bGluZWQsIEFwcHN0b3JlT3V0bGluZWQsIFNldHRpbmdPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgY3VycmVudCA9IHJlZihbJ21haWwnXSk7CiAgICByZXR1cm4gewogICAgICBjdXJyZW50LAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[e(A,{selectedKeys:o.current,"onUpdate:selectedKeys":a[0]||(a[0]=i=>o.current=i),mode:"horizontal"},{default:s(()=>[e(l,{key:"mail"},{icon:s(()=>[e(m)]),default:s(()=>[a[1]||(a[1]=t(" Navigation One "))]),_:1,__:[1]}),e(l,{key:"app",disabled:""},{icon:s(()=>[e(c)]),default:s(()=>[a[2]||(a[2]=t(" Navigation Two "))]),_:1,__:[2]}),e(r,{key:"sub1"},{icon:s(()=>[e(C)]),title:s(()=>a[3]||(a[3]=[t("Navigation Three - Submenu")])),default:s(()=>[e(u,{title:"Item 1"},{default:s(()=>[e(l,{key:"setting:1"},{default:s(()=>a[4]||(a[4]=[t("Option 1")])),_:1,__:[4]}),e(l,{key:"setting:2"},{default:s(()=>a[5]||(a[5]=[t("Option 2")])),_:1,__:[5]})]),_:1}),e(u,{title:"Item 2"},{default:s(()=>[e(l,{key:"setting:3"},{default:s(()=>a[6]||(a[6]=[t("Option 3")])),_:1,__:[6]}),e(l,{key:"setting:4"},{default:s(()=>a[7]||(a[7]=[t("Option 4")])),_:1,__:[7]})]),_:1})]),_:1}),e(l,{key:"alipay"},{default:s(()=>a[8]||(a[8]=[n("a",{href:"https://antdv.com",target:"_blank",rel:"noopener noreferrer"}," Navigation Four - Link ",-1)])),_:1,__:[8]})]),_:1},8,["selectedKeys"])]),htmlCode:s(()=>a[9]||(a[9]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("current"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mail"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("mail-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("app"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"disabled"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("appstore-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("setting-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three - Submenu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("alipay"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://antdv.com"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("_blank"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Four - Link
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" current "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'mail'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      current`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[10]||(a[10]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("current"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("horizontal"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mail"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("mail-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("app"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"disabled"),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("appstore-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("setting-outlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three - Submenu"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("setting:4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("alipay"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a")]),t(),n("span",{class:"token attr-name"},"href"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("https://antdv.com"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"target"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("_blank"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"rel"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("noopener noreferrer"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Four - Link
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" current "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'mail'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      current`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const sn=y(tn,[["render",an]]),en=v({components:{MenuFoldOutlined:M,MenuUnfoldOutlined:T,PieChartOutlined:K,MailOutlined:G,DesktopOutlined:H,InboxOutlined:F,AppstoreOutlined:V},setup(){const o=P({collapsed:!1,selectedKeys:["1"],openKeys:["sub1"],preOpenKeys:["sub1"]});L(()=>o.openKeys,(k,g)=>{o.preOpenKeys=g});const a=()=>{o.collapsed=!o.collapsed,o.openKeys=o.collapsed?[]:o.preOpenKeys};return{...X(o),toggleCollapsed:a}}}),on={style:{width:"256px"}};function pn(o,a,k,g,I,Z){const m=p("MenuUnfoldOutlined"),l=p("MenuFoldOutlined"),c=p("a-button"),C=p("PieChartOutlined"),u=p("a-menu-item"),r=p("DesktopOutlined"),A=p("InboxOutlined"),b=p("MailOutlined"),i=p("a-sub-menu"),W=p("AppstoreOutlined"),N=p("a-menu"),x=p("demo-box");return d(),h(x,{jsfiddle:{us:"Inline menu could be collapsed.",cn:"\u5185\u5D4C\u83DC\u5355\u53EF\u4EE5\u88AB\u7F29\u8D77/\u5C55\u5F00\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5185\u5D4C\u83DC\u5355\u53EF\u4EE5\u88AB\u7F29\u8D77/\u5C55\u5F00\u3002</p>
<p>\u4F60\u53EF\u4EE5\u5728 <a href="/components/layout-cn/#components-layout-demo-side">Layout</a> \u91CC\u67E5\u770B\u4FA7\u8FB9\u5E03\u5C40\u7ED3\u5408\u7684\u5B8C\u6574\u793A\u4F8B\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Inline menu could be collapsed.</p>
<p>Here is <a href="/components/layout/#components-layout-demo-side">a complete demo</a> with sider layout.</p>
`,order:2,title:{"zh-CN":"\u7F29\u8D77\u5185\u5D4C\u83DC\u5355","en-US":"Collapsed inline menu"},relativePath:"components/menu/demo/inline-collapsed.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgc3R5bGU9Im1hcmdpbi1ib3R0b206IDE2cHgiIEBjbGljaz0idG9nZ2xlQ29sbGFwc2VkIj4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxQaWVDaGFydE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMTwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPERlc2t0b3BPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHNwYW4+T3B0aW9uIDI8L3NwYW4+CiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxJbmJveE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMzwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFR3bzwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTEiPk9wdGlvbiAxMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzLCB3YXRjaCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWVudUZvbGRPdXRsaW5lZCwKICBNZW51VW5mb2xkT3V0bGluZWQsCiAgUGllQ2hhcnRPdXRsaW5lZCwKICBNYWlsT3V0bGluZWQsCiAgRGVza3RvcE91dGxpbmVkLAogIEluYm94T3V0bGluZWQsCiAgQXBwc3RvcmVPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogICAgTWFpbE91dGxpbmVkLAogICAgRGVza3RvcE91dGxpbmVkLAogICAgSW5ib3hPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICBjb2xsYXBzZWQ6IGZhbHNlLAogICAgICBzZWxlY3RlZEtleXM6IFsnMSddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICAgIHByZU9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgIH0pOwoKICAgIHdhdGNoKAogICAgICAoKSA9PiBzdGF0ZS5vcGVuS2V5cywKICAgICAgKF92YWwsIG9sZFZhbCkgPT4gewogICAgICAgIHN0YXRlLnByZU9wZW5LZXlzID0gb2xkVmFsOwogICAgICB9LAogICAgKTsKICAgIGNvbnN0IHRvZ2dsZUNvbGxhcHNlZCA9ICgpID0+IHsKICAgICAgc3RhdGUuY29sbGFwc2VkID0gIXN0YXRlLmNvbGxhcHNlZDsKICAgICAgc3RhdGUub3BlbktleXMgPSBzdGF0ZS5jb2xsYXBzZWQgPyBbXSA6IHN0YXRlLnByZU9wZW5LZXlzOwogICAgfTsKCiAgICByZXR1cm4gewogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgICB0b2dnbGVDb2xsYXBzZWQsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgc3R5bGU9Im1hcmdpbi1ib3R0b206IDE2cHgiIEBjbGljaz0idG9nZ2xlQ29sbGFwc2VkIj4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxQaWVDaGFydE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMTwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPERlc2t0b3BPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHNwYW4+T3B0aW9uIDI8L3NwYW4+CiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxJbmJveE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMzwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFR3bzwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTEiPk9wdGlvbiAxMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMsIHdhdGNoIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWVudUZvbGRPdXRsaW5lZCwgTWVudVVuZm9sZE91dGxpbmVkLCBQaWVDaGFydE91dGxpbmVkLCBNYWlsT3V0bGluZWQsIERlc2t0b3BPdXRsaW5lZCwgSW5ib3hPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWVudUZvbGRPdXRsaW5lZCwKICAgIE1lbnVVbmZvbGRPdXRsaW5lZCwKICAgIFBpZUNoYXJ0T3V0bGluZWQsCiAgICBNYWlsT3V0bGluZWQsCiAgICBEZXNrdG9wT3V0bGluZWQsCiAgICBJbmJveE91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIGNvbGxhcHNlZDogZmFsc2UsCiAgICAgIHNlbGVjdGVkS2V5czogWycxJ10sCiAgICAgIG9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgICAgcHJlT3BlbktleXM6IFsnc3ViMSddLAogICAgfSk7CiAgICB3YXRjaCgoKSA9PiBzdGF0ZS5vcGVuS2V5cywgKF92YWwsIG9sZFZhbCkgPT4gewogICAgICBzdGF0ZS5wcmVPcGVuS2V5cyA9IG9sZFZhbDsKICAgIH0pOwogICAgY29uc3QgdG9nZ2xlQ29sbGFwc2VkID0gKCkgPT4gewogICAgICBzdGF0ZS5jb2xsYXBzZWQgPSAhc3RhdGUuY29sbGFwc2VkOwogICAgICBzdGF0ZS5vcGVuS2V5cyA9IHN0YXRlLmNvbGxhcHNlZCA/IFtdIDogc3RhdGUucHJlT3BlbktleXM7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgdG9nZ2xlQ29sbGFwc2VkLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",on,[e(c,{type:"primary",style:{"margin-bottom":"16px"},onClick:o.toggleCollapsed},{default:s(()=>[o.collapsed?(d(),h(m,{key:0})):(d(),h(l,{key:1}))]),_:1},8,["onClick"]),e(N,{openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=f=>o.openKeys=f),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=f=>o.selectedKeys=f),mode:"inline",theme:"dark","inline-collapsed":o.collapsed},{default:s(()=>[e(u,{key:"1"},{icon:s(()=>[e(C)]),default:s(()=>[a[2]||(a[2]=n("span",null,"Option 1",-1))]),_:1,__:[2]}),e(u,{key:"2"},{icon:s(()=>[e(r)]),default:s(()=>[a[3]||(a[3]=n("span",null,"Option 2",-1))]),_:1,__:[3]}),e(u,{key:"3"},{icon:s(()=>[e(A)]),default:s(()=>[a[4]||(a[4]=n("span",null,"Option 3",-1))]),_:1,__:[4]}),e(i,{key:"sub1"},{icon:s(()=>[e(b)]),title:s(()=>a[5]||(a[5]=[t("Navigation One")])),default:s(()=>[e(u,{key:"5"},{default:s(()=>a[6]||(a[6]=[t("Option 5")])),_:1,__:[6]}),e(u,{key:"6"},{default:s(()=>a[7]||(a[7]=[t("Option 6")])),_:1,__:[7]}),e(u,{key:"7"},{default:s(()=>a[8]||(a[8]=[t("Option 7")])),_:1,__:[8]}),e(u,{key:"8"},{default:s(()=>a[9]||(a[9]=[t("Option 8")])),_:1,__:[9]})]),_:1}),e(i,{key:"sub2"},{icon:s(()=>[e(W)]),title:s(()=>a[10]||(a[10]=[t("Navigation Two")])),default:s(()=>[e(u,{key:"9"},{default:s(()=>a[11]||(a[11]=[t("Option 9")])),_:1,__:[11]}),e(u,{key:"10"},{default:s(()=>a[12]||(a[12]=[t("Option 10")])),_:1,__:[12]}),e(i,{key:"sub3",title:"Submenu"},{default:s(()=>[e(u,{key:"11"},{default:s(()=>a[13]||(a[13]=[t("Option 11")])),_:1,__:[13]}),e(u,{key:"12"},{default:s(()=>a[14]||(a[14]=[t("Option 12")])),_:1,__:[14]})]),_:1})]),_:1})]),_:1},8,["openKeys","selectedKeys","inline-collapsed"])])]),htmlCode:s(()=>a[15]||(a[15]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("DesktopOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("InboxOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  DesktopOutlined`),n("span",{class:"token punctuation"},","),t(`
  InboxOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    DesktopOutlined`),n("span",{class:"token punctuation"},","),t(`
    InboxOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"collapsed"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"preOpenKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[t("_val"),n("span",{class:"token punctuation"},","),t(" oldVal")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("preOpenKeys "),n("span",{class:"token operator"},"="),t(" oldVal"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("state"),n("span",{class:"token punctuation"},"."),t("collapsed"),n("span",{class:"token punctuation"},";"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" state"),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(" state"),n("span",{class:"token punctuation"},"."),t("preOpenKeys"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[16]||(a[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("DesktopOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("InboxOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("span")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MenuFoldOutlined"),n("span",{class:"token punctuation"},","),t(" MenuUnfoldOutlined"),n("span",{class:"token punctuation"},","),t(" PieChartOutlined"),n("span",{class:"token punctuation"},","),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" DesktopOutlined"),n("span",{class:"token punctuation"},","),t(" InboxOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    DesktopOutlined`),n("span",{class:"token punctuation"},","),t(`
    InboxOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"collapsed"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"preOpenKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[t("_val"),n("span",{class:"token punctuation"},","),t(" oldVal")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("preOpenKeys "),n("span",{class:"token operator"},"="),t(" oldVal"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("state"),n("span",{class:"token punctuation"},"."),t("collapsed"),n("span",{class:"token punctuation"},";"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" state"),n("span",{class:"token punctuation"},"."),t("collapsed "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(" state"),n("span",{class:"token punctuation"},"."),t("preOpenKeys"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const cn=y(en,[["render",pn]]),ln=v({components:{MailOutlined:G,QqOutlined:j,AppstoreOutlined:V,SettingOutlined:S},setup(){const o=w(["1"]),a=w(["sub1"]),k=I=>{console.log("click",I)},g=I=>{console.log("titleClick",I)};return L(a,I=>{console.log("openKeys",I)}),{selectedKeys:o,openKeys:a,handleClick:k,titleClick:g}}});function un(o,a,k,g,I,Z){const m=p("MailOutlined"),l=p("QqOutlined"),c=p("a-menu-item"),C=p("a-menu-item-group"),u=p("a-sub-menu"),r=p("AppstoreOutlined"),A=p("SettingOutlined"),b=p("a-menu"),i=p("demo-box");return d(),h(i,{jsfiddle:{us:"Vertical menu with inline submenus.",cn:"\u5782\u76F4\u83DC\u5355\uFF0C\u5B50\u83DC\u5355\u5185\u5D4C\u5728\u83DC\u5355\u533A\u57DF\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5782\u76F4\u83DC\u5355\uFF0C\u5B50\u83DC\u5355\u5185\u5D4C\u5728\u83DC\u5355\u533A\u57DF\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Vertical menu with inline submenus.</p>
`,order:1,title:{"zh-CN":"\u5185\u5D4C\u83DC\u5355","en-US":"Inline menu"},relativePath:"components/menu/demo/inline.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIGlkPSJkZGRkZGQiCiAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgbW9kZT0iaW5saW5lIgogICAgQGNsaWNrPSJoYW5kbGVDbGljayIKICA+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiIEB0aXRsZUNsaWNrPSJ0aXRsZUNsaWNrIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxNYWlsT3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8UXFPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5JdGVtIDE8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcyIiB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIiBAdGl0bGVDbGljaz0idGl0bGVDbGljayI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVHdvPC90ZW1wbGF0ZT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViNCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgIDwvYS1zdWItbWVudT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmLCB3YXRjaCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgUXFPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHR5cGUgeyBNZW51UHJvcHMgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgUXFPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHNlbGVjdGVkS2V5cyA9IHJlZjxzdHJpbmdbXT4oWycxJ10pOwogICAgY29uc3Qgb3BlbktleXMgPSByZWY8c3RyaW5nW10+KFsnc3ViMSddKTsKICAgIGNvbnN0IGhhbmRsZUNsaWNrOiBNZW51UHJvcHNbJ29uQ2xpY2snXSA9IGUgPT4gewogICAgICBjb25zb2xlLmxvZygnY2xpY2snLCBlKTsKICAgIH07CiAgICBjb25zdCB0aXRsZUNsaWNrID0gKGU6IEV2ZW50KSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCd0aXRsZUNsaWNrJywgZSk7CiAgICB9OwogICAgd2F0Y2gob3BlbktleXMsIHZhbCA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdvcGVuS2V5cycsIHZhbCk7CiAgICB9KTsKICAgIHJldHVybiB7CiAgICAgIHNlbGVjdGVkS2V5cywKICAgICAgb3BlbktleXMsCgogICAgICBoYW5kbGVDbGljaywKICAgICAgdGl0bGVDbGljaywKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIGlkPSJkZGRkZGQiCiAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgbW9kZT0iaW5saW5lIgogICAgQGNsaWNrPSJoYW5kbGVDbGljayIKICA+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiIEB0aXRsZUNsaWNrPSJ0aXRsZUNsaWNrIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxNYWlsT3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8UXFPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5JdGVtIDE8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcyIiB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIiBAdGl0bGVDbGljaz0idGl0bGVDbGljayI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVHdvPC90ZW1wbGF0ZT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViNCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgIDwvYS1zdWItbWVudT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYsIHdhdGNoIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBRcU91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIFFxT3V0bGluZWQsCiAgICBBcHBzdG9yZU91dGxpbmVkLAogICAgU2V0dGluZ091dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBzZWxlY3RlZEtleXMgPSByZWYoWycxJ10pOwogICAgY29uc3Qgb3BlbktleXMgPSByZWYoWydzdWIxJ10pOwogICAgY29uc3QgaGFuZGxlQ2xpY2sgPSBlID0+IHsKICAgICAgY29uc29sZS5sb2coJ2NsaWNrJywgZSk7CiAgICB9OwogICAgY29uc3QgdGl0bGVDbGljayA9IGUgPT4gewogICAgICBjb25zb2xlLmxvZygndGl0bGVDbGljaycsIGUpOwogICAgfTsKICAgIHdhdGNoKG9wZW5LZXlzLCB2YWwgPT4gewogICAgICBjb25zb2xlLmxvZygnb3BlbktleXMnLCB2YWwpOwogICAgfSk7CiAgICByZXR1cm4gewogICAgICBzZWxlY3RlZEtleXMsCiAgICAgIG9wZW5LZXlzLAogICAgICBoYW5kbGVDbGljaywKICAgICAgdGl0bGVDbGljaywKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(b,{id:"dddddd",openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=W=>o.openKeys=W),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=W=>o.selectedKeys=W),style:{width:"256px"},mode:"inline",onClick:o.handleClick},{default:s(()=>[e(u,{key:"sub1",onTitleClick:o.titleClick},{icon:s(()=>[e(m)]),title:s(()=>a[2]||(a[2]=[t("Navigation One")])),default:s(()=>[e(C,{key:"g1"},{icon:s(()=>[e(l)]),title:s(()=>a[3]||(a[3]=[t("Item 1")])),default:s(()=>[e(c,{key:"1"},{default:s(()=>a[4]||(a[4]=[t("Option 1")])),_:1,__:[4]}),e(c,{key:"2"},{default:s(()=>a[5]||(a[5]=[t("Option 2")])),_:1,__:[5]})]),_:1}),e(C,{key:"g2",title:"Item 2"},{default:s(()=>[e(c,{key:"3"},{default:s(()=>a[6]||(a[6]=[t("Option 3")])),_:1,__:[6]}),e(c,{key:"4"},{default:s(()=>a[7]||(a[7]=[t("Option 4")])),_:1,__:[7]})]),_:1})]),_:1},8,["onTitleClick"]),e(u,{key:"sub2",onTitleClick:o.titleClick},{icon:s(()=>[e(r)]),title:s(()=>a[8]||(a[8]=[t("Navigation Two")])),default:s(()=>[e(c,{key:"5"},{default:s(()=>a[9]||(a[9]=[t("Option 5")])),_:1,__:[9]}),e(c,{key:"6"},{default:s(()=>a[10]||(a[10]=[t("Option 6")])),_:1,__:[10]}),e(u,{key:"sub3",title:"Submenu"},{default:s(()=>[e(c,{key:"7"},{default:s(()=>a[11]||(a[11]=[t("Option 7")])),_:1,__:[11]}),e(c,{key:"8"},{default:s(()=>a[12]||(a[12]=[t("Option 8")])),_:1,__:[12]})]),_:1})]),_:1},8,["onTitleClick"]),e(u,{key:"sub4"},{icon:s(()=>[e(A)]),title:s(()=>a[13]||(a[13]=[t("Navigation Three")])),default:s(()=>[e(c,{key:"9"},{default:s(()=>a[14]||(a[14]=[t("Option 9")])),_:1,__:[14]}),e(c,{key:"10"},{default:s(()=>a[15]||(a[15]=[t("Option 10")])),_:1,__:[15]}),e(c,{key:"11"},{default:s(()=>a[16]||(a[16]=[t("Option 11")])),_:1,__:[16]}),e(c,{key:"12"},{default:s(()=>a[17]||(a[17]=[t("Option 12")])),_:1,__:[17]})]),_:1})]),_:1},8,["openKeys","selectedKeys","onClick"])]),htmlCode:s(()=>a[18]||(a[18]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dddddd"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("QqOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Item 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" QqOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(" type "),n("span",{class:"token punctuation"},"{"),t(" MenuProps "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    QqOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" selectedKeys "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" openKeys "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token literal-property property"},"handleClick"),n("span",{class:"token operator"},":"),t(" MenuProps"),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'onClick'"),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"e"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"titleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"e"),n("span",{class:"token operator"},":"),t(" Event")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'titleClick'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),t("openKeys"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token parameter"},"val"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'openKeys'"),n("span",{class:"token punctuation"},","),t(" val"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      selectedKeys`),n("span",{class:"token punctuation"},","),t(`
      openKeys`),n("span",{class:"token punctuation"},","),t(`

      handleClick`),n("span",{class:"token punctuation"},","),t(`
      titleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[19]||(a[19]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},"id"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dddddd"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("QqOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Item 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item-group")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("g2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Item 2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item-group")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@titleClick"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("titleClick"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Two"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref"),n("span",{class:"token punctuation"},","),t(" watch "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" QqOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    QqOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" selectedKeys "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" openKeys "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"handleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"e"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"titleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"e"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'titleClick'"),n("span",{class:"token punctuation"},","),t(" e"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token function"},"watch"),n("span",{class:"token punctuation"},"("),t("openKeys"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token parameter"},"val"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'openKeys'"),n("span",{class:"token punctuation"},","),t(" val"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      selectedKeys`),n("span",{class:"token punctuation"},","),t(`
      openKeys`),n("span",{class:"token punctuation"},","),t(`
      handleClick`),n("span",{class:"token punctuation"},","),t(`
      titleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const kn=y(ln,[["render",un]]),gn=v({components:{MailOutlined:G,AppstoreOutlined:V,SettingOutlined:S},setup(){const o=P({rootSubmenuKeys:["sub1","sub2","sub4"],openKeys:["sub1"],selectedKeys:[]}),a=k=>{const g=k.find(I=>o.openKeys.indexOf(I)===-1);o.rootSubmenuKeys.indexOf(g)===-1?o.openKeys=k:o.openKeys=g?[g]:[]};return{...X(o),onOpenChange:a}}});function rn(o,a,k,g,I,Z){const m=p("MailOutlined"),l=p("a-menu-item"),c=p("a-sub-menu"),C=p("AppstoreOutlined"),u=p("SettingOutlined"),r=p("a-menu"),A=p("demo-box");return d(),h(A,{jsfiddle:{us:"Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.",cn:"\u70B9\u51FB\u83DC\u5355\uFF0C\u6536\u8D77\u5176\u4ED6\u5C55\u5F00\u7684\u6240\u6709\u83DC\u5355\uFF0C\u4FDD\u6301\u83DC\u5355\u805A\u7126\u7B80\u6D01\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u70B9\u51FB\u83DC\u5355\uFF0C\u6536\u8D77\u5176\u4ED6\u5C55\u5F00\u7684\u6240\u6709\u83DC\u5355\uFF0C\u4FDD\u6301\u83DC\u5355\u805A\u7126\u7B80\u6D01\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.</p>
`,order:2,title:{"zh-CN":"\u53EA\u5C55\u5F00\u5F53\u524D\u7236\u7EA7\u83DC\u5355","en-US":"Open current submenu only"},relativePath:"components/menu/demo/sider-current.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1tZW51CiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgOm9wZW4ta2V5cz0ib3BlbktleXMiCiAgICAgIEBvcGVuQ2hhbmdlPSJvbk9wZW5DaGFuZ2UiCiAgICA+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+T3B0aW9uIDE8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjIiPk9wdGlvbiAyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPjwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT4KICAgICAgICAgIDxBcHBzdG9yZU91dGxpbmVkIC8+CiAgICAgICAgICBOYXZpZ2F0aW9uIFR3bwogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjYiPk9wdGlvbiA2PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjMiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWI0Ij4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMCI+T3B0aW9uIDEwPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMSI+T3B0aW9uIDExPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBNYWlsT3V0bGluZWQsIEFwcHN0b3JlT3V0bGluZWQsIFNldHRpbmdPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIHJvb3RTdWJtZW51S2V5czogWydzdWIxJywgJ3N1YjInLCAnc3ViNCddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICAgIHNlbGVjdGVkS2V5czogW10sCiAgICB9KTsKICAgIGNvbnN0IG9uT3BlbkNoYW5nZSA9IChvcGVuS2V5czogc3RyaW5nW10pID0+IHsKICAgICAgY29uc3QgbGF0ZXN0T3BlbktleSA9IG9wZW5LZXlzLmZpbmQoa2V5ID0+IHN0YXRlLm9wZW5LZXlzLmluZGV4T2Yoa2V5KSA9PT0gLTEpOwogICAgICBpZiAoc3RhdGUucm9vdFN1Ym1lbnVLZXlzLmluZGV4T2YobGF0ZXN0T3BlbktleSEpID09PSAtMSkgewogICAgICAgIHN0YXRlLm9wZW5LZXlzID0gb3BlbktleXM7CiAgICAgIH0gZWxzZSB7CiAgICAgICAgc3RhdGUub3BlbktleXMgPSBsYXRlc3RPcGVuS2V5ID8gW2xhdGVzdE9wZW5LZXldIDogW107CiAgICAgIH0KICAgIH07CiAgICByZXR1cm4gewogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgICBvbk9wZW5DaGFuZ2UsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1tZW51CiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgOm9wZW4ta2V5cz0ib3BlbktleXMiCiAgICAgIEBvcGVuQ2hhbmdlPSJvbk9wZW5DaGFuZ2UiCiAgICA+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+T3B0aW9uIDE8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjIiPk9wdGlvbiAyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPjwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT4KICAgICAgICAgIDxBcHBzdG9yZU91dGxpbmVkIC8+CiAgICAgICAgICBOYXZpZ2F0aW9uIFR3bwogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjYiPk9wdGlvbiA2PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjMiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWI0Ij4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMCI+T3B0aW9uIDEwPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMSI+T3B0aW9uIDExPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmVmcyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBBcHBzdG9yZU91dGxpbmVkLAogICAgU2V0dGluZ091dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgcm9vdFN1Ym1lbnVLZXlzOiBbJ3N1YjEnLCAnc3ViMicsICdzdWI0J10sCiAgICAgIG9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgICAgc2VsZWN0ZWRLZXlzOiBbXSwKICAgIH0pOwogICAgY29uc3Qgb25PcGVuQ2hhbmdlID0gb3BlbktleXMgPT4gewogICAgICBjb25zdCBsYXRlc3RPcGVuS2V5ID0gb3BlbktleXMuZmluZChrZXkgPT4gc3RhdGUub3BlbktleXMuaW5kZXhPZihrZXkpID09PSAtMSk7CiAgICAgIGlmIChzdGF0ZS5yb290U3VibWVudUtleXMuaW5kZXhPZihsYXRlc3RPcGVuS2V5KSA9PT0gLTEpIHsKICAgICAgICBzdGF0ZS5vcGVuS2V5cyA9IG9wZW5LZXlzOwogICAgICB9IGVsc2UgewogICAgICAgIHN0YXRlLm9wZW5LZXlzID0gbGF0ZXN0T3BlbktleSA/IFtsYXRlc3RPcGVuS2V5XSA6IFtdOwogICAgICB9CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgb25PcGVuQ2hhbmdlLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",null,[e(r,{selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[0]||(a[0]=b=>o.selectedKeys=b),style:{width:"256px"},mode:"inline","open-keys":o.openKeys,onOpenChange:o.onOpenChange},{default:s(()=>[e(c,{key:"sub1"},{icon:s(()=>[e(m)]),title:s(()=>a[1]||(a[1]=[t("Navigation One")])),default:s(()=>[e(l,{key:"1"},{default:s(()=>a[2]||(a[2]=[t("Option 1")])),_:1,__:[2]}),e(l,{key:"2"},{default:s(()=>a[3]||(a[3]=[t("Option 2")])),_:1,__:[3]}),e(l,{key:"3"},{default:s(()=>a[4]||(a[4]=[t("Option 3")])),_:1,__:[4]}),e(l,{key:"4"},{default:s(()=>a[5]||(a[5]=[t("Option 4")])),_:1,__:[5]})]),_:1}),e(c,{key:"sub2"},{icon:s(()=>a[6]||(a[6]=[])),title:s(()=>[e(C),a[7]||(a[7]=t(" Navigation Two "))]),default:s(()=>[e(l,{key:"5"},{default:s(()=>a[8]||(a[8]=[t("Option 5")])),_:1,__:[8]}),e(l,{key:"6"},{default:s(()=>a[9]||(a[9]=[t("Option 6")])),_:1,__:[9]}),e(c,{key:"sub3",title:"Submenu"},{default:s(()=>[e(l,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(l,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]})]),_:1})]),_:1}),e(c,{key:"sub4"},{icon:s(()=>[e(u)]),title:s(()=>a[12]||(a[12]=[t("Navigation Three")])),default:s(()=>[e(l,{key:"9"},{default:s(()=>a[13]||(a[13]=[t("Option 9")])),_:1,__:[13]}),e(l,{key:"10"},{default:s(()=>a[14]||(a[14]=[t("Option 10")])),_:1,__:[14]}),e(l,{key:"11"},{default:s(()=>a[15]||(a[15]=[t("Option 11")])),_:1,__:[15]}),e(l,{key:"12"},{default:s(()=>a[16]||(a[16]=[t("Option 12")])),_:1,__:[16]})]),_:1})]),_:1},8,["selectedKeys","open-keys","onOpenChange"])])]),htmlCode:s(()=>a[17]||(a[17]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":open-keys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@openChange"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("onOpenChange"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
          Navigation Two
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"rootSubmenuKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub2'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub4'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"onOpenChange"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token keyword"},"const"),t(" latestOpenKey "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"find"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"key"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("key"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token keyword"},"if"),t(),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},"."),t("rootSubmenuKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("latestOpenKey"),n("span",{class:"token operator"},"!"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"else"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" latestOpenKey "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),t("latestOpenKey"),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      onOpenChange`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[18]||(a[18]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":open-keys"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@openChange"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("onOpenChange"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation One"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 1"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 2"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
          Navigation Two
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub3"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("11"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 11"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("12"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 12"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"rootSubmenuKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub2'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token string"},"'sub4'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"onOpenChange"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"openKeys"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token keyword"},"const"),t(" latestOpenKey "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"find"),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},"key"),t(),n("span",{class:"token operator"},"=>"),t(" state"),n("span",{class:"token punctuation"},"."),t("openKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("key"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token keyword"},"if"),t(),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},"."),t("rootSubmenuKeys"),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"indexOf"),n("span",{class:"token punctuation"},"("),t("latestOpenKey"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"==="),t(),n("span",{class:"token operator"},"-"),n("span",{class:"token number"},"1"),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" openKeys"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"else"),t(),n("span",{class:"token punctuation"},"{"),t(`
        state`),n("span",{class:"token punctuation"},"."),t("openKeys "),n("span",{class:"token operator"},"="),t(" latestOpenKey "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token punctuation"},"["),t("latestOpenKey"),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
      `),n("span",{class:"token punctuation"},"}"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      onOpenChange`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const dn=y(gn,[["render",rn]]),In=v({components:{MailOutlined:G,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S},setup(){const o=P({mode:"inline",theme:"light",selectedKeys:["1"],openKeys:["sub1"]}),a=g=>{o.mode=g?"vertical":"inline"},k=g=>{o.theme=g?"dark":"light"};return{...X(o),changeMode:a,changeTheme:k}}});function mn(o,a,k,g,I,Z){const m=p("a-switch"),l=p("MailOutlined"),c=p("a-menu-item"),C=p("CalendarOutlined"),u=p("AppstoreOutlined"),r=p("a-sub-menu"),A=p("SettingOutlined"),b=p("a-menu"),i=p("demo-box");return d(),h(i,{jsfiddle:{us:"Show the dynamic switching mode (between `inline` and `vertical`).",cn:"\u5C55\u793A\u52A8\u6001\u5207\u6362\u6A21\u5F0F\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5C55\u793A\u52A8\u6001\u5207\u6362\u6A21\u5F0F\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Show the dynamic switching mode (between <code>inline</code> and <code>vertical</code>).</p>
`,order:5,title:{"zh-CN":"\u5207\u6362\u83DC\u5355\u7C7B\u578B","en-US":"Switch the menu type"},relativePath:"components/menu/demo/switch-mode.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2ggOmNoZWNrZWQ9Im1vZGUgPT09ICd2ZXJ0aWNhbCciIEBjaGFuZ2U9ImNoYW5nZU1vZGUiIC8+CiAgICBDaGFuZ2UgTW9kZQogICAgPHNwYW4gY2xhc3M9ImFudC1kaXZpZGVyIiBzdHlsZT0ibWFyZ2luOiAwIDFlbSIgLz4KICAgIDxhLXN3aXRjaCA6Y2hlY2tlZD0idGhlbWUgPT09ICdkYXJrJyIgQGNoYW5nZT0iY2hhbmdlVGhlbWUiIC8+CiAgICBDaGFuZ2UgVGhlbWUKICAgIDxiciAvPgogICAgPGJyIC8+CiAgICA8YS1tZW51CiAgICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgICA6bW9kZT0ibW9kZSIKICAgICAgOnRoZW1lPSJ0aGVtZSIKICAgID4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBPbmUKICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPENhbGVuZGFyT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjEtMiIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgoKICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgdHlwZSB7IE1lbnVNb2RlLCBNZW51VGhlbWUgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICBtb2RlOiAnaW5saW5lJyBhcyBNZW51TW9kZSwKICAgICAgdGhlbWU6ICdsaWdodCcgYXMgTWVudVRoZW1lLAogICAgICBzZWxlY3RlZEtleXM6IFsnMSddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICB9KTsKICAgIGNvbnN0IGNoYW5nZU1vZGUgPSAoY2hlY2tlZDogYm9vbGVhbikgPT4gewogICAgICBzdGF0ZS5tb2RlID0gY2hlY2tlZCA/ICd2ZXJ0aWNhbCcgOiAnaW5saW5lJzsKICAgIH07CiAgICBjb25zdCBjaGFuZ2VUaGVtZSA9IChjaGVja2VkOiBib29sZWFuKSA9PiB7CiAgICAgIHN0YXRlLnRoZW1lID0gY2hlY2tlZCA/ICdkYXJrJyA6ICdsaWdodCc7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgY2hhbmdlTW9kZSwKICAgICAgY2hhbmdlVGhlbWUsCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2ggOmNoZWNrZWQ9Im1vZGUgPT09ICd2ZXJ0aWNhbCciIEBjaGFuZ2U9ImNoYW5nZU1vZGUiIC8+CiAgICBDaGFuZ2UgTW9kZQogICAgPHNwYW4gY2xhc3M9ImFudC1kaXZpZGVyIiBzdHlsZT0ibWFyZ2luOiAwIDFlbSIgLz4KICAgIDxhLXN3aXRjaCA6Y2hlY2tlZD0idGhlbWUgPT09ICdkYXJrJyIgQGNoYW5nZT0iY2hhbmdlVGhlbWUiIC8+CiAgICBDaGFuZ2UgVGhlbWUKICAgIDxiciAvPgogICAgPGJyIC8+CiAgICA8YS1tZW51CiAgICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgICA6bW9kZT0ibW9kZSIKICAgICAgOnRoZW1lPSJ0aGVtZSIKICAgID4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBPbmUKICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPENhbGVuZGFyT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjEtMiIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgoKICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBNYWlsT3V0bGluZWQsIENhbGVuZGFyT3V0bGluZWQsIEFwcHN0b3JlT3V0bGluZWQsIFNldHRpbmdPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICBtb2RlOiAnaW5saW5lJywKICAgICAgdGhlbWU6ICdsaWdodCcsCiAgICAgIHNlbGVjdGVkS2V5czogWycxJ10sCiAgICAgIG9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgIH0pOwogICAgY29uc3QgY2hhbmdlTW9kZSA9IGNoZWNrZWQgPT4gewogICAgICBzdGF0ZS5tb2RlID0gY2hlY2tlZCA/ICd2ZXJ0aWNhbCcgOiAnaW5saW5lJzsKICAgIH07CiAgICBjb25zdCBjaGFuZ2VUaGVtZSA9IGNoZWNrZWQgPT4gewogICAgICBzdGF0ZS50aGVtZSA9IGNoZWNrZWQgPyAnZGFyaycgOiAnbGlnaHQnOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGNoYW5nZU1vZGUsCiAgICAgIGNoYW5nZVRoZW1lLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",null,[e(m,{checked:o.mode==="vertical",onChange:o.changeMode},null,8,["checked","onChange"]),a[14]||(a[14]=t(" Change Mode ")),a[15]||(a[15]=n("span",{class:"ant-divider",style:{margin:"0 1em"}},null,-1)),e(m,{checked:o.theme==="dark",onChange:o.changeTheme},null,8,["checked","onChange"]),a[16]||(a[16]=t(" Change Theme ")),a[17]||(a[17]=n("br",null,null,-1)),a[18]||(a[18]=n("br",null,null,-1)),e(b,{openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=W=>o.openKeys=W),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=W=>o.selectedKeys=W),style:{width:"256px"},mode:o.mode,theme:o.theme},{default:s(()=>[e(c,{key:"1"},{icon:s(()=>[e(l)]),default:s(()=>[a[2]||(a[2]=t(" Navigation One "))]),_:1,__:[2]}),e(c,{key:"2"},{icon:s(()=>[e(C)]),default:s(()=>[a[3]||(a[3]=t(" Navigation Two "))]),_:1,__:[3]}),e(r,{key:"sub1"},{icon:s(()=>[e(u)]),title:s(()=>a[4]||(a[4]=[t("Navigation Three")])),default:s(()=>[e(c,{key:"3"},{default:s(()=>a[5]||(a[5]=[t("Option 3")])),_:1,__:[5]}),e(c,{key:"4"},{default:s(()=>a[6]||(a[6]=[t("Option 4")])),_:1,__:[6]}),e(r,{key:"sub1-2",title:"Submenu"},{default:s(()=>[e(c,{key:"5"},{default:s(()=>a[7]||(a[7]=[t("Option 5")])),_:1,__:[7]}),e(c,{key:"6"},{default:s(()=>a[8]||(a[8]=[t("Option 6")])),_:1,__:[8]})]),_:1})]),_:1}),e(r,{key:"sub2"},{icon:s(()=>[e(A)]),title:s(()=>a[9]||(a[9]=[t("Navigation Four")])),default:s(()=>[e(c,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(c,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]}),e(c,{key:"9"},{default:s(()=>a[12]||(a[12]=[t("Option 9")])),_:1,__:[12]}),e(c,{key:"10"},{default:s(()=>a[13]||(a[13]=[t("Option 10")])),_:1,__:[13]})]),_:1})]),_:1},8,["openKeys","selectedKeys","mode","theme"])])]),htmlCode:s(()=>a[19]||(a[19]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode === 'vertical'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeMode"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Mode
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ant-divider"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),t(" 0 1em")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Theme
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},":mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`

        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(" type "),n("span",{class:"token punctuation"},"{"),t(" MenuMode"),n("span",{class:"token punctuation"},","),t(" MenuTheme "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"mode"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),t(),n("span",{class:"token keyword"},"as"),t(" MenuMode"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),t(),n("span",{class:"token keyword"},"as"),t(" MenuTheme"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeMode"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),t(" boolean")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("mode "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'vertical'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),t(" boolean")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeMode`),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[20]||(a[20]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode === 'vertical'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeMode"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Mode
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("span")]),t(),n("span",{class:"token attr-name"},"class"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ant-divider"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin"),n("span",{class:"token punctuation"},":"),t(" 0 1em")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    Change Theme
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},":mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("mode"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`

        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" CalendarOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"mode"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeMode"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"checked"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("mode "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'vertical'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'inline'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"checked"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeMode`),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const Cn=y(In,[["render",mn]]),An=v({components:{MailOutlined:G,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S},setup(){const o=P({theme:"dark",selectedKeys:["1"],openKeys:["sub1"]}),a=k=>{o.theme=k?"dark":"light"};return{...X(o),changeTheme:a}}});function bn(o,a,k,g,I,Z){const m=p("a-switch"),l=p("MailOutlined"),c=p("a-menu-item"),C=p("CalendarOutlined"),u=p("AppstoreOutlined"),r=p("a-sub-menu"),A=p("SettingOutlined"),b=p("a-menu"),i=p("demo-box");return d(),h(i,{jsfiddle:{us:"There are two built-in themes: `light` and `dark`. The default value is `light`.",cn:"\u5185\u5EFA\u4E86\u4E24\u5957\u4E3B\u9898 `light` \u548C `dark`\uFF0C\u9ED8\u8BA4 `light`\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5185\u5EFA\u4E86\u4E24\u5957\u4E3B\u9898 <code>light</code> \u548C <code>dark</code>\uFF0C\u9ED8\u8BA4 <code>light</code>\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>There are two built-in themes: <code>light</code> and <code>dark</code>. The default value is <code>light</code>.</p>
`,order:4,title:{"zh-CN":"\u4E3B\u9898","en-US":"Menu Themes"},relativePath:"components/menu/demo/theme.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2gKICAgICAgOmNoZWNrZWQ9InRoZW1lID09PSAnZGFyayciCiAgICAgIGNoZWNrZWQtY2hpbGRyZW49IkRhcmsiCiAgICAgIHVuLWNoZWNrZWQtY2hpbGRyZW49IkxpZ2h0IgogICAgICBAY2hhbmdlPSJjaGFuZ2VUaGVtZSIKICAgIC8+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtbWVudQogICAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgc3R5bGU9IndpZHRoOiAyNTZweCIKICAgICAgbW9kZT0iaW5saW5lIgogICAgICA6dGhlbWU9InRoZW1lIgogICAgPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICBOYXZpZ2F0aW9uIE9uZQogICAgICA8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBUd28KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMS0yIiB0aXRsZT0iU3VibWVudSI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIEZvdXI8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmVmcyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWFpbE91dGxpbmVkLAogIENhbGVuZGFyT3V0bGluZWQsCiAgQXBwc3RvcmVPdXRsaW5lZCwKICBTZXR0aW5nT3V0bGluZWQsCn0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKaW1wb3J0IHR5cGUgeyBNZW51VGhlbWUgfSBmcm9tICdhbnQtZGVzaWduLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICB0aGVtZTogJ2RhcmsnIGFzIE1lbnVUaGVtZSwKICAgICAgc2VsZWN0ZWRLZXlzOiBbJzEnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgfSk7CiAgICBjb25zdCBjaGFuZ2VUaGVtZSA9IChjaGVja2VkOiBib29sZWFuKSA9PiB7CiAgICAgIHN0YXRlLnRoZW1lID0gY2hlY2tlZCA/ICdkYXJrJyA6ICdsaWdodCc7CiAgICB9OwoKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGNoYW5nZVRoZW1lLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2gKICAgICAgOmNoZWNrZWQ9InRoZW1lID09PSAnZGFyayciCiAgICAgIGNoZWNrZWQtY2hpbGRyZW49IkRhcmsiCiAgICAgIHVuLWNoZWNrZWQtY2hpbGRyZW49IkxpZ2h0IgogICAgICBAY2hhbmdlPSJjaGFuZ2VUaGVtZSIKICAgIC8+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtbWVudQogICAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgc3R5bGU9IndpZHRoOiAyNTZweCIKICAgICAgbW9kZT0iaW5saW5lIgogICAgICA6dGhlbWU9InRoZW1lIgogICAgPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICBOYXZpZ2F0aW9uIE9uZQogICAgICA8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBUd28KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMS0yIiB0aXRsZT0iU3VibWVudSI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIEZvdXI8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBDYWxlbmRhck91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIENhbGVuZGFyT3V0bGluZWQsCiAgICBBcHBzdG9yZU91dGxpbmVkLAogICAgU2V0dGluZ091dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgdGhlbWU6ICdkYXJrJywKICAgICAgc2VsZWN0ZWRLZXlzOiBbJzEnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgfSk7CiAgICBjb25zdCBjaGFuZ2VUaGVtZSA9IGNoZWNrZWQgPT4gewogICAgICBzdGF0ZS50aGVtZSA9IGNoZWNrZWQgPyAnZGFyaycgOiAnbGlnaHQnOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGNoYW5nZVRoZW1lLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",null,[e(m,{checked:o.theme==="dark","checked-children":"Dark","un-checked-children":"Light",onChange:o.changeTheme},null,8,["checked","onChange"]),a[14]||(a[14]=n("br",null,null,-1)),a[15]||(a[15]=n("br",null,null,-1)),e(b,{openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=W=>o.openKeys=W),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=W=>o.selectedKeys=W),style:{width:"256px"},mode:"inline",theme:o.theme},{default:s(()=>[e(c,{key:"1"},{icon:s(()=>[e(l)]),default:s(()=>[a[2]||(a[2]=t(" Navigation One "))]),_:1,__:[2]}),e(c,{key:"2"},{icon:s(()=>[e(C)]),default:s(()=>[a[3]||(a[3]=t(" Navigation Two "))]),_:1,__:[3]}),e(r,{key:"sub1"},{icon:s(()=>[e(u)]),title:s(()=>a[4]||(a[4]=[t("Navigation Three")])),default:s(()=>[e(c,{key:"3"},{default:s(()=>a[5]||(a[5]=[t("Option 3")])),_:1,__:[5]}),e(c,{key:"4"},{default:s(()=>a[6]||(a[6]=[t("Option 4")])),_:1,__:[6]}),e(r,{key:"sub1-2",title:"Submenu"},{default:s(()=>[e(c,{key:"5"},{default:s(()=>a[7]||(a[7]=[t("Option 5")])),_:1,__:[7]}),e(c,{key:"6"},{default:s(()=>a[8]||(a[8]=[t("Option 6")])),_:1,__:[8]})]),_:1})]),_:1}),e(r,{key:"sub2"},{icon:s(()=>[e(A)]),title:s(()=>a[9]||(a[9]=[t("Navigation Four")])),default:s(()=>[e(c,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(c,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]}),e(c,{key:"9"},{default:s(()=>a[12]||(a[12]=[t("Option 9")])),_:1,__:[12]}),e(c,{key:"10"},{default:s(()=>a[13]||(a[13]=[t("Option 10")])),_:1,__:[13]})]),_:1})]),_:1},8,["openKeys","selectedKeys","theme"])])]),htmlCode:s(()=>a[16]||(a[16]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(`
      `),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"un-checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Light"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(" type "),n("span",{class:"token punctuation"},"{"),t(" MenuTheme "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token keyword"},"as"),t(" MenuTheme"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"checked"),n("span",{class:"token operator"},":"),t(" boolean")]),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[17]||(a[17]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-switch")]),t(`
      `),n("span",{class:"token attr-name"},":checked"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme === 'dark'"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"un-checked-children"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Light"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"@change"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("changeTheme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("br")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("theme"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation One
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        Navigation Two
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" CalendarOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"theme"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'dark'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'sub1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"changeTheme"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"checked"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      state`),n("span",{class:"token punctuation"},"."),t("theme "),n("span",{class:"token operator"},"="),t(" checked "),n("span",{class:"token operator"},"?"),t(),n("span",{class:"token string"},"'dark'"),t(),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'light'"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      changeTheme`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const hn=y(An,[["render",bn]]),Wn=v({components:{MailOutlined:G,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S},setup(){const o=P({selectedKeys:[],openKeys:[]}),a=k=>{console.log("click ",k)};return{...X(o),handleClick:a}}});function yn(o,a,k,g,I,Z){const m=p("MailOutlined"),l=p("a-menu-item"),c=p("CalendarOutlined"),C=p("AppstoreOutlined"),u=p("a-sub-menu"),r=p("SettingOutlined"),A=p("a-menu"),b=p("demo-box");return d(),h(b,{jsfiddle:{us:"Submenus open as pop-ups.",cn:"\u5B50\u83DC\u5355\u662F\u5F39\u51FA\u7684\u5F62\u5F0F\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u5B50\u83DC\u5355\u662F\u5F39\u51FA\u7684\u5F62\u5F0F\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Submenus open as pop-ups.</p>
`,order:3,title:{"zh-CN":"\u5782\u76F4\u83DC\u5355","en-US":"Vertical menu"},relativePath:"components/menu/demo/vertical.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICBtb2RlPSJ2ZXJ0aWNhbCIKICAgIEBjbGljaz0iaGFuZGxlQ2xpY2siCiAgPgogICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIE5hdmlnYXRpb24gT25lCiAgICA8L2EtbWVudS1pdGVtPgogICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIFR3bwogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxLTIiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2Etc3ViLW1lbnU+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgPC9hLXN1Yi1tZW51PgogIDwvYS1tZW51Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwppbXBvcnQgdHlwZSB7IE1lbnVQcm9wcyB9IGZyb20gJ2FudC1kZXNpZ24tdnVlJzsKCmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICBzZWxlY3RlZEtleXM6IFtdLAogICAgICBvcGVuS2V5czogW10sCiAgICB9KTsKICAgIGNvbnN0IGhhbmRsZUNsaWNrOiBNZW51UHJvcHNbJ29uQ2xpY2snXSA9IG1lbnVJbmZvID0+IHsKICAgICAgY29uc29sZS5sb2coJ2NsaWNrICcsIG1lbnVJbmZvKTsKICAgIH07CiAgICByZXR1cm4gewogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgICBoYW5kbGVDbGljaywKICAgIH07CiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICBtb2RlPSJ2ZXJ0aWNhbCIKICAgIEBjbGljaz0iaGFuZGxlQ2xpY2siCiAgPgogICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIE5hdmlnYXRpb24gT25lCiAgICA8L2EtbWVudS1pdGVtPgogICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIFR3bwogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxLTIiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2Etc3ViLW1lbnU+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgPC9hLXN1Yi1tZW51PgogIDwvYS1tZW51Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwppbXBvcnQgeyBNYWlsT3V0bGluZWQsIENhbGVuZGFyT3V0bGluZWQsIEFwcHN0b3JlT3V0bGluZWQsIFNldHRpbmdPdXRsaW5lZCB9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICBzZWxlY3RlZEtleXM6IFtdLAogICAgICBvcGVuS2V5czogW10sCiAgICB9KTsKICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gbWVudUluZm8gPT4gewogICAgICBjb25zb2xlLmxvZygnY2xpY2sgJywgbWVudUluZm8pOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGhhbmRsZUNsaWNrLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[e(A,{openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=i=>o.openKeys=i),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=i=>o.selectedKeys=i),style:{width:"256px"},mode:"vertical",onClick:o.handleClick},{default:s(()=>[e(l,{key:"1"},{icon:s(()=>[e(m)]),default:s(()=>[a[2]||(a[2]=t(" Navigation One "))]),_:1,__:[2]}),e(l,{key:"2"},{icon:s(()=>[e(c)]),default:s(()=>[a[3]||(a[3]=t(" Navigation Two "))]),_:1,__:[3]}),e(u,{key:"sub1"},{icon:s(()=>[e(C)]),title:s(()=>a[4]||(a[4]=[t("Navigation Three")])),default:s(()=>[e(l,{key:"3"},{default:s(()=>a[5]||(a[5]=[t("Option 3")])),_:1,__:[5]}),e(l,{key:"4"},{default:s(()=>a[6]||(a[6]=[t("Option 4")])),_:1,__:[6]}),e(u,{key:"sub1-2",title:"Submenu"},{default:s(()=>[e(l,{key:"5"},{default:s(()=>a[7]||(a[7]=[t("Option 5")])),_:1,__:[7]}),e(l,{key:"6"},{default:s(()=>a[8]||(a[8]=[t("Option 6")])),_:1,__:[8]})]),_:1})]),_:1}),e(u,{key:"sub2"},{icon:s(()=>[e(r)]),title:s(()=>a[9]||(a[9]=[t("Navigation Four")])),default:s(()=>[e(l,{key:"7"},{default:s(()=>a[10]||(a[10]=[t("Option 7")])),_:1,__:[10]}),e(l,{key:"8"},{default:s(()=>a[11]||(a[11]=[t("Option 8")])),_:1,__:[11]}),e(l,{key:"9"},{default:s(()=>a[12]||(a[12]=[t("Option 9")])),_:1,__:[12]}),e(l,{key:"10"},{default:s(()=>a[13]||(a[13]=[t("Option 10")])),_:1,__:[13]})]),_:1})]),_:1},8,["openKeys","selectedKeys","onClick"])]),htmlCode:s(()=>a[14]||(a[14]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("vertical"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
  AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
  SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(" type "),n("span",{class:"token punctuation"},"{"),t(" MenuProps "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'ant-design-vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token literal-property property"},"handleClick"),n("span",{class:"token operator"},":"),t(" MenuProps"),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'onClick'"),n("span",{class:"token punctuation"},"]"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"menuInfo"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click '"),n("span",{class:"token punctuation"},","),t(" menuInfo"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      handleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[15]||(a[15]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),t(`
    `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("vertical"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("handleClick"),n("span",{class:"token punctuation"},'"')]),t(`
  `),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MailOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation One
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("CalendarOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      Navigation Two
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("AppstoreOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Three"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("3"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 3"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("4"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 4"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub1-2"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},"title"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("Submenu"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("5"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 5"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("6"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 6"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-sub-menu")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("sub2"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("SettingOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#title"),n("span",{class:"token punctuation"},">")]),t("Navigation Four"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("7"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 7"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("8"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 8"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("9"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 9"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},"key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("10"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t("Option 10"),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-sub-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" reactive"),n("span",{class:"token punctuation"},","),t(" toRefs "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MailOutlined"),n("span",{class:"token punctuation"},","),t(" CalendarOutlined"),n("span",{class:"token punctuation"},","),t(" AppstoreOutlined"),n("span",{class:"token punctuation"},","),t(" SettingOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
    CalendarOutlined`),n("span",{class:"token punctuation"},","),t(`
    AppstoreOutlined`),n("span",{class:"token punctuation"},","),t(`
    SettingOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" state "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"reactive"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"handleClick"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token parameter"},"menuInfo"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      console`),n("span",{class:"token punctuation"},"."),n("span",{class:"token function"},"log"),n("span",{class:"token punctuation"},"("),n("span",{class:"token string"},"'click '"),n("span",{class:"token punctuation"},","),t(" menuInfo"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token operator"},"..."),n("span",{class:"token function"},"toRefs"),n("span",{class:"token punctuation"},"("),t("state"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      handleClick`),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const Zn=y(Wn,[["render",yn]]),vn={name:"SubMenu",props:{menuInfo:{type:Object,default:()=>({})}},template:`
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.title }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `,components:{PieChartOutlined:K,MailOutlined:G}},Gn=[{key:"1",title:"Option 1"},{key:"2",title:"Navigation 2",children:[{key:"2.1",title:"Navigation 3",children:[{key:"2.1.1",title:"Option 2.1.1"}]}]}],Vn=v({components:{"sub-menu":vn,MenuFoldOutlined:M,MenuUnfoldOutlined:T,PieChartOutlined:K},setup(){const o=w(!1);return{list:Gn,collapsed:o,toggleCollapsed:()=>{o.value=!o.value},selectedKeys:w(["1"]),openKeys:w(["2"])}}}),wn={style:{width:"256px"}};function Sn(o,a,k,g,I,Z){const m=p("MenuUnfoldOutlined"),l=p("MenuFoldOutlined"),c=p("a-button"),C=p("PieChartOutlined"),u=p("a-menu-item"),r=p("sub-menu"),A=p("a-menu"),b=p("demo-box");return d(),h(b,{jsfiddle:{us:"Use the single file method to recursively generate menus.",cn:"\u4F7F\u7528\u5355\u6587\u4EF6\u65B9\u5F0F\u9012\u5F52\u751F\u6210\u83DC\u5355\u3002",docHtml:`<h2 id="zh-CN">zh-CN <a class="header-anchor" href="#zh-CN">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>\u4F7F\u7528\u5355\u6587\u4EF6\u65B9\u5F0F\u9012\u5F52\u751F\u6210\u83DC\u5355\u3002</p>
<h2 id="en-US">en-US <a class="header-anchor" href="#en-US">
          <span aria-hidden="true" class="anchor">#</span>
        </a></h2>
<p>Use the single file method to recursively generate menus.</p>
`,order:99,title:{"zh-CN":"\u5355\u6587\u4EF6\u9012\u5F52\u83DC\u5355","en-US":"Single file recursive menu"},relativePath:"components/menu/demo/template.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgc3R5bGU9Im1hcmdpbi1ib3R0b206IDE2cHgiIEBjbGljaz0idG9nZ2xlQ29sbGFwc2VkIj4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBsaXN0IiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6a2V5PSJpdGVtLmtleSIgOm1lbnUtaW5mbz0iaXRlbSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWVudUZvbGRPdXRsaW5lZCwKICBNZW51VW5mb2xkT3V0bGluZWQsCiAgUGllQ2hhcnRPdXRsaW5lZCwKICBNYWlsT3V0bGluZWQsCn0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKCi8vIHlvdSBjYW4gcmV3cml0ZSBpdCB0byBhIHNpbmdsZSBmaWxlIGNvbXBvbmVudCwgaWYgbm90LCB5b3Ugc2hvdWxkIGNvbmZpZyB2dWUgYWxpYXMgdG8gdnVlL2Rpc3QvdnVlLmVzbS1idW5kbGVyLmpzCmNvbnN0IFN1Yk1lbnUgPSB7CiAgbmFtZTogJ1N1Yk1lbnUnLAogIHByb3BzOiB7CiAgICBtZW51SW5mbzogewogICAgICB0eXBlOiBPYmplY3QsCiAgICAgIGRlZmF1bHQ6ICgpID0+ICh7fSksCiAgICB9LAogIH0sCiAgdGVtcGxhdGU6IGAKICAgIDxhLXN1Yi1tZW51IDprZXk9Im1lbnVJbmZvLmtleSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48TWFpbE91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT57eyBtZW51SW5mby50aXRsZSB9fTwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBtZW51SW5mby5jaGlsZHJlbiIgOmtleT0iaXRlbS5rZXkiPgogICAgICAgIDx0ZW1wbGF0ZSB2LWlmPSIhaXRlbS5jaGlsZHJlbiI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0gOmtleT0iaXRlbS5rZXkiPgogICAgICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICAgICAgPFBpZUNoYXJ0T3V0bGluZWQgLz4KICAgICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgICAge3sgaXRlbS50aXRsZSB9fQogICAgICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSB2LWVsc2U+CiAgICAgICAgICA8c3ViLW1lbnUgOm1lbnUtaW5mbz0iaXRlbSIgOmtleT0iaXRlbS5rZXkiIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPC90ZW1wbGF0ZT4KICAgIDwvYS1zdWItbWVudT4KICBgLAogIGNvbXBvbmVudHM6IHsKICAgIFBpZUNoYXJ0T3V0bGluZWQsCiAgICBNYWlsT3V0bGluZWQsCiAgfSwKfTsKY29uc3QgbGlzdCA9IFsKICB7CiAgICBrZXk6ICcxJywKICAgIHRpdGxlOiAnT3B0aW9uIDEnLAogIH0sCiAgewogICAga2V5OiAnMicsCiAgICB0aXRsZTogJ05hdmlnYXRpb24gMicsCiAgICBjaGlsZHJlbjogWwogICAgICB7CiAgICAgICAga2V5OiAnMi4xJywKICAgICAgICB0aXRsZTogJ05hdmlnYXRpb24gMycsCiAgICAgICAgY2hpbGRyZW46IFt7IGtleTogJzIuMS4xJywgdGl0bGU6ICdPcHRpb24gMi4xLjEnIH1dLAogICAgICB9LAogICAgXSwKICB9LApdOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIGNvbXBvbmVudHM6IHsKICAgICdzdWItbWVudSc6IFN1Yk1lbnUsCiAgICBNZW51Rm9sZE91dGxpbmVkLAogICAgTWVudVVuZm9sZE91dGxpbmVkLAogICAgUGllQ2hhcnRPdXRsaW5lZCwKICB9LAogIHNldHVwKCkgewogICAgY29uc3QgY29sbGFwc2VkID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKCiAgICBjb25zdCB0b2dnbGVDb2xsYXBzZWQgPSAoKSA9PiB7CiAgICAgIGNvbGxhcHNlZC52YWx1ZSA9ICFjb2xsYXBzZWQudmFsdWU7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgbGlzdCwKICAgICAgY29sbGFwc2VkLAogICAgICB0b2dnbGVDb2xsYXBzZWQsCiAgICAgIHNlbGVjdGVkS2V5czogcmVmKFsnMSddKSwKICAgICAgb3BlbktleXM6IHJlZihbJzInXSksCiAgICB9OwogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgc3R5bGU9Im1hcmdpbi1ib3R0b206IDE2cHgiIEBjbGljaz0idG9nZ2xlQ29sbGFwc2VkIj4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBsaXN0IiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6a2V5PSJpdGVtLmtleSIgOm1lbnUtaW5mbz0iaXRlbSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWVudUZvbGRPdXRsaW5lZCwgTWVudVVuZm9sZE91dGxpbmVkLCBQaWVDaGFydE91dGxpbmVkLCBNYWlsT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwoKLy8geW91IGNhbiByZXdyaXRlIGl0IHRvIGEgc2luZ2xlIGZpbGUgY29tcG9uZW50LCBpZiBub3QsIHlvdSBzaG91bGQgY29uZmlnIHZ1ZSBhbGlhcyB0byB2dWUvZGlzdC92dWUuZXNtLWJ1bmRsZXIuanMKY29uc3QgU3ViTWVudSA9IHsKICBuYW1lOiAnU3ViTWVudScsCiAgcHJvcHM6IHsKICAgIG1lbnVJbmZvOiB7CiAgICAgIHR5cGU6IE9iamVjdCwKICAgICAgZGVmYXVsdDogKCkgPT4gKHt9KSwKICAgIH0sCiAgfSwKICB0ZW1wbGF0ZTogYAogICAgPGEtc3ViLW1lbnUgOmtleT0ibWVudUluZm8ua2V5Ij4KICAgICAgPHRlbXBsYXRlICNpY29uPjxNYWlsT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPnt7IG1lbnVJbmZvLnRpdGxlIH19PC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlIHYtZm9yPSJpdGVtIGluIG1lbnVJbmZvLmNoaWxkcmVuIiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6bWVudS1pbmZvPSJpdGVtIiA6a2V5PSJpdGVtLmtleSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLXN1Yi1tZW51PgogIGAsCiAgY29tcG9uZW50czogewogICAgUGllQ2hhcnRPdXRsaW5lZCwKICAgIE1haWxPdXRsaW5lZCwKICB9LAp9Owpjb25zdCBsaXN0ID0gW3sKICBrZXk6ICcxJywKICB0aXRsZTogJ09wdGlvbiAxJywKfSwgewogIGtleTogJzInLAogIHRpdGxlOiAnTmF2aWdhdGlvbiAyJywKICBjaGlsZHJlbjogW3sKICAgIGtleTogJzIuMScsCiAgICB0aXRsZTogJ05hdmlnYXRpb24gMycsCiAgICBjaGlsZHJlbjogW3sKICAgICAga2V5OiAnMi4xLjEnLAogICAgICB0aXRsZTogJ09wdGlvbiAyLjEuMScsCiAgICB9XSwKICB9XSwKfV07CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgY29tcG9uZW50czogewogICAgJ3N1Yi1tZW51JzogU3ViTWVudSwKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogIH0sCiAgc2V0dXAoKSB7CiAgICBjb25zdCBjb2xsYXBzZWQgPSByZWYoZmFsc2UpOwogICAgY29uc3QgdG9nZ2xlQ29sbGFwc2VkID0gKCkgPT4gewogICAgICBjb2xsYXBzZWQudmFsdWUgPSAhY29sbGFwc2VkLnZhbHVlOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIGxpc3QsCiAgICAgIGNvbGxhcHNlZCwKICAgICAgdG9nZ2xlQ29sbGFwc2VkLAogICAgICBzZWxlY3RlZEtleXM6IHJlZihbJzEnXSksCiAgICAgIG9wZW5LZXlzOiByZWYoWycyJ10pLAogICAgfTsKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[n("div",wn,[e(c,{type:"primary",style:{"margin-bottom":"16px"},onClick:o.toggleCollapsed},{default:s(()=>[o.collapsed?(d(),h(m,{key:0})):(d(),h(l,{key:1}))]),_:1},8,["onClick"]),e(A,{openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=i=>o.openKeys=i),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=i=>o.selectedKeys=i),mode:"inline",theme:"dark","inline-collapsed":o.collapsed},{default:s(()=>[(d(!0),R(O,null,U(o.list,i=>(d(),R(O,{key:i.key},[i.children?(d(),h(r,{key:i.key,"menu-info":i},null,8,["menu-info"])):(d(),h(u,{key:i.key},{icon:s(()=>[e(C)]),default:s(()=>[t(" "+D(i.title),1)]),_:2},1024))],64))),128))]),_:1},8,["openKeys","selectedKeys","inline-collapsed"])])]),htmlCode:s(()=>a[2]||(a[2]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item in list"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!item.children"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
            {{ item.title }}
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("sub-menu")]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":menu-info"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),t(),n("span",{class:"token attr-name"},"lang"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("ts"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(`
  MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
  PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  MailOutlined`),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token comment"},"// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js"),t(`
`),n("span",{class:"token keyword"},"const"),t(" SubMenu "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'SubMenu'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"props"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"menuInfo"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(" Object"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token function-variable function"},"default"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"template"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},`
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.title }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" list "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 1'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 2'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),t(`
      `),n("span",{class:"token punctuation"},"{"),t(`
        `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 3'"),n("span",{class:"token punctuation"},","),t(`
        `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1.1'"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 2.1.1'"),t(),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token string-property property"},"'sub-menu'"),n("span",{class:"token operator"},":"),t(" SubMenu"),n("span",{class:"token punctuation"},","),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" collapsed "),n("span",{class:"token operator"},"="),t(" ref"),n("span",{class:"token operator"},"<"),t("boolean"),n("span",{class:"token operator"},">"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`

    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      collapsed`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("collapsed"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      list`),n("span",{class:"token punctuation"},","),t(`
      collapsed`),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),jsVersionHtml:s(()=>a[3]||(a[3]=[n("pre",{class:"language-vue"},[n("code",null,[n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("div")]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"width"),n("span",{class:"token punctuation"},":"),t(" 256px")]),n("span",{class:"token punctuation"},'"')])]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-button")]),t(),n("span",{class:"token attr-name"},"type"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("primary"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token special-attr"},[n("span",{class:"token attr-name"},"style"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),n("span",{class:"token value css language-css"},[n("span",{class:"token property"},"margin-bottom"),n("span",{class:"token punctuation"},":"),t(" 16px")]),n("span",{class:"token punctuation"},'"')])]),t(),n("span",{class:"token attr-name"},"@click"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("toggleCollapsed"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuUnfoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("MenuFoldOutlined")]),t(),n("span",{class:"token attr-name"},"v-else"),t(),n("span",{class:"token punctuation"},"/>")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-button")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu")]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("openKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("openKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},[n("span",{class:"token namespace"},"v-model:"),t("selectedKeys")]),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("selectedKeys"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"mode"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("inline"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},"theme"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("dark"),n("span",{class:"token punctuation"},'"')]),t(`
      `),n("span",{class:"token attr-name"},":inline-collapsed"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("collapsed"),n("span",{class:"token punctuation"},'"')]),t(`
    `),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-for"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item in list"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-if"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("!item.children"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),n("span",{class:"token punctuation"},">")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"#icon"),n("span",{class:"token punctuation"},">")]),t(`
              `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("PieChartOutlined")]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
            `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
            {{ item.title }}
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu-item")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("template")]),t(),n("span",{class:"token attr-name"},"v-else"),n("span",{class:"token punctuation"},">")]),t(`
          `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("sub-menu")]),t(),n("span",{class:"token attr-name"},":key"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item.key"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token attr-name"},":menu-info"),n("span",{class:"token attr-value"},[n("span",{class:"token punctuation attr-equals"},"="),n("span",{class:"token punctuation"},'"'),t("item"),n("span",{class:"token punctuation"},'"')]),t(),n("span",{class:"token punctuation"},"/>")]),t(`
        `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
      `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
    `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("a-menu")]),n("span",{class:"token punctuation"},">")]),t(`
  `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("div")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("template")]),n("span",{class:"token punctuation"},">")]),t(`
`),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("script")]),n("span",{class:"token punctuation"},">")]),n("span",{class:"token script"},[n("span",{class:"token language-javascript"},[t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" defineComponent"),n("span",{class:"token punctuation"},","),t(" ref "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'vue'"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"import"),t(),n("span",{class:"token punctuation"},"{"),t(" MenuFoldOutlined"),n("span",{class:"token punctuation"},","),t(" MenuUnfoldOutlined"),n("span",{class:"token punctuation"},","),t(" PieChartOutlined"),n("span",{class:"token punctuation"},","),t(" MailOutlined "),n("span",{class:"token punctuation"},"}"),t(),n("span",{class:"token keyword"},"from"),t(),n("span",{class:"token string"},"'@ant-design/icons-vue'"),n("span",{class:"token punctuation"},";"),t(`

`),n("span",{class:"token comment"},"// you can rewrite it to a single file component, if not, you should config vue alias to vue/dist/vue.esm-bundler.js"),t(`
`),n("span",{class:"token keyword"},"const"),t(" SubMenu "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"name"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'SubMenu'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"props"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"menuInfo"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"type"),n("span",{class:"token operator"},":"),t(" Object"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token function-variable function"},"default"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"template"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token template-string"},[n("span",{class:"token template-punctuation string"},"`"),n("span",{class:"token string"},`
    <a-sub-menu :key="menuInfo.key">
      <template #icon><MailOutlined /></template>
      <template #title>{{ menuInfo.title }}</template>
      <template v-for="item in menuInfo.children" :key="item.key">
        <template v-if="!item.children">
          <a-menu-item :key="item.key">
            <template #icon>
              <PieChartOutlined />
            </template>
            {{ item.title }}
          </a-menu-item>
        </template>
        <template v-else>
          <sub-menu :menu-info="item" :key="item.key" />
        </template>
      </template>
    </a-sub-menu>
  `),n("span",{class:"token template-punctuation string"},"`")]),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
    MailOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"const"),t(" list "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 1'"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 2'"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Navigation 3'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token literal-property property"},"children"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"["),n("span",{class:"token punctuation"},"{"),t(`
      `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'2.1.1'"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"title"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token string"},"'Option 2.1.1'"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},";"),t(`
`),n("span",{class:"token keyword"},"export"),t(),n("span",{class:"token keyword"},"default"),t(),n("span",{class:"token function"},"defineComponent"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"{"),t(`
  `),n("span",{class:"token literal-property property"},"components"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token string-property property"},"'sub-menu'"),n("span",{class:"token operator"},":"),t(" SubMenu"),n("span",{class:"token punctuation"},","),t(`
    MenuFoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    MenuUnfoldOutlined`),n("span",{class:"token punctuation"},","),t(`
    PieChartOutlined`),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
  `),n("span",{class:"token function"},"setup"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token punctuation"},"{"),t(`
    `),n("span",{class:"token keyword"},"const"),t(" collapsed "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token boolean"},"false"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"const"),t(),n("span",{class:"token function-variable function"},"toggleCollapsed"),t(),n("span",{class:"token operator"},"="),t(),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),t(),n("span",{class:"token punctuation"},"{"),t(`
      collapsed`),n("span",{class:"token punctuation"},"."),t("value "),n("span",{class:"token operator"},"="),t(),n("span",{class:"token operator"},"!"),t("collapsed"),n("span",{class:"token punctuation"},"."),t("value"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
    `),n("span",{class:"token keyword"},"return"),t(),n("span",{class:"token punctuation"},"{"),t(`
      list`),n("span",{class:"token punctuation"},","),t(`
      collapsed`),n("span",{class:"token punctuation"},","),t(`
      toggleCollapsed`),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"selectedKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'1'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
      `),n("span",{class:"token literal-property property"},"openKeys"),n("span",{class:"token operator"},":"),t(),n("span",{class:"token function"},"ref"),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},"["),n("span",{class:"token string"},"'2'"),n("span",{class:"token punctuation"},"]"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},","),t(`
    `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},";"),t(`
  `),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},","),t(`
`),n("span",{class:"token punctuation"},"}"),n("span",{class:"token punctuation"},")"),n("span",{class:"token punctuation"},";"),t(`
`)])]),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"</"),t("script")]),n("span",{class:"token punctuation"},">")]),t(`
`)])],-1)])),_:1})}const Pn=y(Vn,[["render",Sn]]),Xn=v({CN:J,US:nn,components:{Horizontal:sn,InlineCollapsed:cn,Inline:kn,SiderCurrent:dn,SwitchMode:Cn,Theme:hn,Vertical:Zn,TemplateSingleFile:Pn}});function Rn(o,a,k,g,I,Z){const m=p("horizontal"),l=p("inline"),c=p("inline-collapsed"),C=p("sider-current"),u=p("switch-mode"),r=p("theme"),A=p("vertical"),b=p("TemplateSingleFile"),i=p("demo-sort");return d(),h(i,{cols:1},{default:s(()=>[e(m),e(l),e(c),e(C),e(u),e(r),e(A),e(b)]),_:1})}const Mn=y(Xn,[["render",Rn]]);export{Mn as default};