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:`

\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\u3002

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

API 

<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>
\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
\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 })
\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
\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\uFF0Cmode="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

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

\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

`,lastUpdated:1748060300918}},q={class:"markdown"};function E(o,a,k,g,I,Z){return d(),R("article",q,a[0]||(a[0]=[Y(`

\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\u3002

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

API 

<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>
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
forceSubMenuRender\u5728\u5B50\u83DC\u5355\u5C55\u793A\u4E4B\u524D\u5C31\u6E32\u67D3\u8FDB DOMbooleanfalse
inlineCollapsedinline \u65F6\u83DC\u5355\u662F\u5426\u6536\u8D77\u72B6\u6001boolean-
inlineIndentinline \u6A21\u5F0F\u7684\u83DC\u5355\u7F29\u8FDB\u5BBD\u5EA6number24
mode\u83DC\u5355\u7C7B\u578B\uFF0C\u73B0\u5728\u652F\u6301\u5782\u76F4\u3001\u6C34\u5E73\u3001\u548C\u5185\u5D4C\u6A21\u5F0F\u4E09\u79CDvertical | horizontal | inlinevertical
multiple\u662F\u5426\u5141\u8BB8\u591A\u9009booleanfalse
openKeys(v-model)\u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4string[]
overflowedIndicator\u7528\u4E8E\u81EA\u5B9A\u4E49 Menu \u6C34\u5E73\u7A7A\u95F4\u4E0D\u8DB3\u65F6\u7684\u7701\u7565\u6536\u7F29\u7684\u56FE\u6807slot<EllipsisOutlined />
selectable\u662F\u5426\u5141\u8BB8\u9009\u4E2Dbooleantrue
selectedKeys(v-model)\u5F53\u524D\u9009\u4E2D\u7684\u83DC\u5355\u9879 key \u6570\u7EC4string[]
subMenuCloseDelay\u7528\u6237\u9F20\u6807\u79BB\u5F00\u5B50\u83DC\u5355\u540E\u5173\u95ED\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2number0.1
subMenuOpenDelay\u7528\u6237\u9F20\u6807\u8FDB\u5165\u5B50\u83DC\u5355\u540E\u5F00\u542F\u5EF6\u65F6\uFF0C\u5355\u4F4D\uFF1A\u79D2number0
theme\u4E3B\u9898\u989C\u8272light | darklight
triggerSubMenuAction\u4FEE\u6539 Menu \u5B50\u83DC\u5355\u7684\u89E6\u53D1\u65B9\u5F0Fclick | hoverhover
\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
click\u70B9\u51FB MenuItem \u8C03\u7528\u6B64\u51FD\u6570function({ item, key, keyPath })
deselect\u53D6\u6D88\u9009\u4E2D\u65F6\u8C03\u7528\uFF0C\u4EC5\u5728 multiple \u751F\u6548function({ item, key, selectedKeys })
openChangeSubMenu \u5C55\u5F00/\u5173\u95ED\u7684\u56DE\u8C03function(openKeys: string[])
select\u88AB\u9009\u4E2D\u65F6\u8C03\u7528function({ item, key, selectedKeys })
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
disabled\u662F\u5426\u7981\u7528booleanfalse
icon\u83DC\u5355\u56FE\u6807slot2.8.0
keyitem \u7684\u552F\u4E00\u6807\u5FD7string
title\u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898string | slot
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
disabled\u662F\u5426\u7981\u7528booleanfalse
expandIcon\u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807slot\u7BAD\u5934\u56FE\u6807
icon\u83DC\u5355\u56FE\u6807slot2.8.0
key\u552F\u4E00\u6807\u5FD7, \u5FC5\u586Bstring
popupClassName\u5B50\u83DC\u5355\u6837\u5F0Fstring1.5.0
popupOffset\u5B50\u83DC\u5355\u504F\u79FB\u91CF\uFF0Cmode="inline" \u65F6\u65E0\u6548[number, number]-
title\u5B50\u83DC\u5355\u9879\u503Cstring|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

\u4E8B\u4EF6\u540D\u79F0\u8BF4\u660E\u56DE\u8C03\u53C2\u6570
titleClick\u70B9\u51FB\u5B50\u83DC\u5355\u6807\u9898({ key, domEvent })
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
title\u5206\u7EC4\u6807\u9898string|slot

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

\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\u7EBFbooleanfalse3.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

`,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 <template> <a-menu> <a-menu-item>Menu</a-menu-item> <a-sub-menu key="sub1" title="SubMenu"> <a-menu-item>SubMenuItem</a-menu-item> </a-sub-menu> </a-menu> </template> \`\`\` ### 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 | \`<EllipsisOutlined />\` | | 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="inline"\` | \\[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'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:`

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.

Notes for developers

API 

<template>
  <a-menu>
    <a-menu-item>Menu</a-menu-item>
    <a-sub-menu key="sub1" title="SubMenu">
      <a-menu-item>SubMenuItem</a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
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 <EllipsisOutlined />
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
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 })
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
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="inline" [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.

Events Name Description Arguments
titleClick callback executed when the sub menu title is clicked function({ key, domEvent })
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.

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'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.

`,lastUpdated:1748060300917}},_={class:"markdown"};function $(o,a,k,g,I,Z){return d(),R("article",_,a[0]||(a[0]=[Y(`

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.

Notes for developers

API 

<template>
  <a-menu>
    <a-menu-item>Menu</a-menu-item>
    <a-sub-menu key="sub1" title="SubMenu">
      <a-menu-item>SubMenuItem</a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
ParamDescriptionTypeDefault value
forceSubMenuRenderrender submenu into DOM before it showsbooleanfalse
inlineCollapsedspecifies the collapsed status when menu is inline modeboolean-
inlineIndentindent px of inline menu item on each levelnumber24
modetype of the menu; vertical, horizontal, and inline modes are supportedvertical | horizontal | inlinevertical
multipleAllow selection of multiple itemsbooleanfalse
openKeys(v-model)array with the keys of currently opened sub menusstring[]
overflowedIndicatorCustomized the ellipsis icon when menu is collapsed horizontallyslot<EllipsisOutlined />
selectableallow selecting menu itemsbooleantrue
selectedKeys(v-model)array with the keys of currently selected menu itemsstring[]
stylestyle of the root nodeobject
subMenuCloseDelaydelay time to hide submenu when mouse leave, unit: secondnumber0.1
subMenuOpenDelaydelay time to show submenu when mouse enter, unit: secondnumber0
themecolor theme of the menulight | darklight
triggerSubMenuActionmethod of trigger submenuclick | hoverhover
Events NameDescriptionArguments
clickcallback executed when a menu item is clickedfunction({ item, key, keyPath })
deselectcallback executed when a menu item is deselected, only supported for multiple modefunction({ item, key, selectedKeys })
openChangecalled when open/close sub menufunction(openKeys: string[])
selectcallback executed when a menu item is selectedfunction({ item, key, selectedKeys })
ParamDescriptionTypeDefault value
disabledwhether menu item is disabled or notbooleanfalse
keyunique id of the menu itemstring
titleset display title for collapsed itemstring | slot
ParamDescriptionTypeDefault valueVersion
disabledwhether sub menu is disabled or notbooleanfalse
expandIconCustomized expandIconslotarrow icon\uFF5C
keyUnique ID of the sub menu, requiredstring
popupClassNameSub-menu class namestring1.5.0
popupOffsetSub-menu offset, not working when mode="inline"[number, number]-
titletitle of the sub menustring|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.

Events NameDescriptionArguments
titleClickcallback executed when the sub menu title is clickedfunction({ key, domEvent })
ParamDescriptionTypeDefault value
childrensub-menu itemsMenuItem[]
titletitle of the groupstring|slot

The children of Menu.ItemGroup must be MenuItem.

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

ParamDescriptionTypeDefault valueVersion
dashedWhether line is dashedbooleanfalse4.17.0

FAQ

Why will Menu'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.

`,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:`

zh-CN

\u6C34\u5E73\u7684\u9876\u90E8\u5BFC\u822A\u83DC\u5355\u3002

en-US

Horizontal top navigation menu.

`,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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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:`

zh-CN

\u5185\u5D4C\u83DC\u5355\u53EF\u4EE5\u88AB\u7F29\u8D77/\u5C55\u5F00\u3002

\u4F60\u53EF\u4EE5\u5728 Layout \u91CC\u67E5\u770B\u4FA7\u8FB9\u5E03\u5C40\u7ED3\u5408\u7684\u5B8C\u6574\u793A\u4F8B\u3002

en-US

Inline menu could be collapsed.

Here is a complete demo with sider layout.

`,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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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:`

zh-CN

\u5782\u76F4\u83DC\u5355\uFF0C\u5B50\u83DC\u5355\u5185\u5D4C\u5728\u83DC\u5355\u533A\u57DF\u3002

en-US

Vertical menu with inline submenus.

`,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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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:`

zh-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

en-US

Click the menu and you will see that all the other menus gets collapsed to keep the entire menu compact.

`,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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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:`

zh-CN

\u5C55\u793A\u52A8\u6001\u5207\u6362\u6A21\u5F0F\u3002

en-US

Show the dynamic switching mode (between inline and vertical).

`,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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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:`

zh-CN

\u5185\u5EFA\u4E86\u4E24\u5957\u4E3B\u9898 light \u548C dark\uFF0C\u9ED8\u8BA4 light\u3002

en-US

There are two built-in themes: light and dark. The default value is light.

`,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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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:`

zh-CN

\u5B50\u83DC\u5355\u662F\u5F39\u51FA\u7684\u5F62\u5F0F\u3002

en-US

Submenus open as pop-ups.

`,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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-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(` Navigation One `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` Navigation Two `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),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(` `),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(` `),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(` `),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(` `),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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `)])],-1)])),_:1})}const Zn=y(Wn,[["render",yn]]),vn={name:"SubMenu",props:{menuInfo:{type:Object,default:()=>({})}},template:` `,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:`

zh-CN

\u4F7F\u7528\u5355\u6587\u4EF6\u65B9\u5F0F\u9012\u5F52\u751F\u6210\u83DC\u5355\u3002

en-US

Use the single file method to recursively generate menus.

`,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(` `),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(` {{ item.title }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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"},` `),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(` `)])],-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(` `),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(` {{ item.title }} `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[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"},` `),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(` `)])],-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};