import{_ as Z,k as d,a as X,n as Y,d as v,r as R,j as p,l as W,w as s,f as e,e as t,b as n,B as w,s as L,H as P,ab as B,h as U,F as O,t as H}from"./index.c1b9962e.js";import{M as h,Q as M}from"./QqOutlined.e089f8d0.js";import{A as V,a as T,M as x,P as f,D as j}from"./PieChartOutlined.75340577.js";import{S}from"./SettingOutlined.83c252fc.js";import{I as F}from"./InboxOutlined.6c9ba79a.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:"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"}],relativePath:"src/docs/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 ## API \`\`\`html <template> <a-menu> <a-menu-item>\u83DC\u5355\u9879</a-menu-item> <a-sub-menu 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 | string: \`vertical\` \`vertical-right\` \`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\\[] | | | 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 | string: \`light\` \`dark\` | \`light\` | | overflowedIndicator | \u81EA\u5B9A\u4E49 Menu \u6298\u53E0\u65F6\u7684\u56FE\u6807 | DOM | \`<span>\xB7\xB7\xB7</span>\` | ### 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 | | | key | item \u7684\u552F\u4E00\u6807\u5FD7 | string | | | | title | \u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898 | string/slot | | | | icon | \u83DC\u5355\u56FE\u6807 | slot | | 2.8.0 | ### Menu.SubMenu | \u53C2\u6570 | \u8BF4\u660E | \u7C7B\u578B | \u9ED8\u8BA4\u503C | \u7248\u672C | | -------------- | ------------------------ | ------------ | -------- | ----- | | popupClassName | \u5B50\u83DC\u5355\u6837\u5F0F | string | | 1.5.0 | | disabled | \u662F\u5426\u7981\u7528 | boolean | false | | | key | \u552F\u4E00\u6807\u5FD7 | string | | | | title | \u5B50\u83DC\u5355\u9879\u503C | string\\|slot | | | | 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 | Menu.SubMenu \u7684\u5B50\u5143\u7D20\u5FC5\u987B\u662F \`MenuItem\` \u6216\u8005 \`SubMenu\`. ### 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\\|\\|function\\|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 `,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

API

<template>
  <a-menu>
    <a-menu-item>\u83DC\u5355\u9879</a-menu-item>
    <a-sub-menu 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 string: vertical vertical-right 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[]
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 string: light dark light
overflowedIndicator \u81EA\u5B9A\u4E49 Menu \u6298\u53E0\u65F6\u7684\u56FE\u6807 DOM <span>\xB7\xB7\xB7</span>
\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
key item \u7684\u552F\u4E00\u6807\u5FD7 string
title \u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898 string/slot
icon \u83DC\u5355\u56FE\u6807 slot 2.8.0
\u53C2\u6570 \u8BF4\u660E \u7C7B\u578B \u9ED8\u8BA4\u503C \u7248\u672C
popupClassName \u5B50\u83DC\u5355\u6837\u5F0F string 1.5.0
disabled \u662F\u5426\u7981\u7528 boolean false
key \u552F\u4E00\u6807\u5FD7 string
title \u5B50\u83DC\u5355\u9879\u503C string|slot
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

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

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

`,lastUpdated:1748059052701}},q={class:"markdown"};function E(o,a,i,g,I,G){return d(),X("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

API

<template>
  <a-menu>
    <a-menu-item>\u83DC\u5355\u9879</a-menu-item>
    <a-sub-menu 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\u79CDstring: vertical vertical-right horizontal inlinevertical
multiple\u662F\u5426\u5141\u8BB8\u591A\u9009booleanfalse
openKeys(v-model)\u5F53\u524D\u5C55\u5F00\u7684 SubMenu \u83DC\u5355\u9879 key \u6570\u7EC4string[]
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\u8272string: light darklight
overflowedIndicator\u81EA\u5B9A\u4E49 Menu \u6298\u53E0\u65F6\u7684\u56FE\u6807DOM<span>\xB7\xB7\xB7</span>
\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
keyitem \u7684\u552F\u4E00\u6807\u5FD7string
title\u8BBE\u7F6E\u6536\u7F29\u65F6\u5C55\u793A\u7684\u60AC\u6D6E\u6807\u9898string/slot
icon\u83DC\u5355\u56FE\u6807slot2.8.0
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C\u7248\u672C
popupClassName\u5B50\u83DC\u5355\u6837\u5F0Fstring1.5.0
disabled\u662F\u5426\u7981\u7528booleanfalse
key\u552F\u4E00\u6807\u5FD7string
title\u5B50\u83DC\u5355\u9879\u503Cstring|slot
expandIcon\u81EA\u5B9A\u4E49 Menu \u5C55\u5F00\u6536\u8D77\u56FE\u6807slot\u7BAD\u5934\u56FE\u6807
icon\u83DC\u5355\u56FE\u6807slot2.8.0

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

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

`,22)]))}var J=Z(z,[["render",E]]);const 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 top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website."},{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."}],relativePath:"src/docs/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 top and side navigation options. 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). ## API \`\`\`html <template> <a-menu> <a-menu-item>Menu</a-menu-item> <a-sub-menu 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 | string: \`vertical\` \\| \`vertical-right\` \\| \`horizontal\` \\| \`inline\` | \`vertical\` | | multiple | Allow selection of multiple items | boolean | false | | openKeys(v-model) | array with the keys of currently opened sub menus | string\\[] | | | 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 | string: \`light\` \`dark\` | \`light\` | | overflowedIndicator | Customized icon when menu is collapsed | DOM | \`<span>\xB7\xB7\xB7</span>\` | ### 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 | | ### Menu.SubMenu | Param | Description | Type | Default value | Version | | -------------- | ----------------------------------- | ------------ | ------------- | ------- | | popupClassName | Sub-menu class name | string | | 1.5.0 | | disabled | whether sub menu is disabled or not | boolean | false | | | key | Unique ID of the sub menu | string | | | | title | title of the sub menu | string\\|slot | | | | expandIcon | Customized expandIcon | slot | arrow icon | \uFF5C | The children of Menu.SubMenu must be \`MenuItem\` or \`SubMenu\`. ### 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. `,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 top and side navigation options. 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.

API

<template>
  <a-menu>
    <a-menu-item>Menu</a-menu-item>
    <a-sub-menu 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 string: vertical | vertical-right | horizontal | inline vertical
multiple Allow selection of multiple items boolean false
openKeys(v-model) array with the keys of currently opened sub menus string[]
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 string: light dark light
overflowedIndicator Customized icon when menu is collapsed DOM <span>\xB7\xB7\xB7</span>
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
Param Description Type Default value Version
popupClassName Sub-menu class name string 1.5.0
disabled whether sub menu is disabled or not boolean false
key Unique ID of the sub menu string
title title of the sub menu string|slot
expandIcon Customized expandIcon slot arrow icon \uFF5C

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

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.

`,lastUpdated:1748059052700}},_={class:"markdown"};function $(o,a,i,g,I,G){return d(),X("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 top and side navigation options. 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.

API

<template>
  <a-menu>
    <a-menu-item>Menu</a-menu-item>
    <a-sub-menu 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 supportedstring: vertical | vertical-right | horizontal | inlinevertical
multipleAllow selection of multiple itemsbooleanfalse
openKeys(v-model)array with the keys of currently opened sub menusstring[]
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 menustring: light darklight
overflowedIndicatorCustomized icon when menu is collapsedDOM<span>\xB7\xB7\xB7</span>
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
ParamDescriptionTypeDefault valueVersion
popupClassNameSub-menu class namestring1.5.0
disabledwhether sub menu is disabled or notbooleanfalse
keyUnique ID of the sub menustring
titletitle of the sub menustring|slot
expandIconCustomized expandIconslotarrow icon\uFF5C

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

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.

`,22)]))}var nn=Z(Q,[["render",$]]);const tn=v({setup(){return{current:R(["mail"])}},components:{MailOutlined:h,AppstoreOutlined:V,SettingOutlined:S}});function an(o,a,i,g,I,G){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(),W(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:"src/docs/menu/demo/horizontal.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUgdi1tb2RlbDpzZWxlY3RlZEtleXM9ImN1cnJlbnQiIG1vZGU9Imhvcml6b250YWwiPgogICAgPGEtbWVudS1pdGVtIGtleT0ibWFpbCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8bWFpbC1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIE9uZQogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFwcCIgZGlzYWJsZWQ+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8YXBwc3RvcmUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgTmF2aWdhdGlvbiBUd28KICAgIDwvYS1tZW51LWl0ZW0+CiAgICA8YS1zdWItbWVudT4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxzZXR0aW5nLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZSAtIFN1Ym1lbnU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0tZ3JvdXAgdGl0bGU9Ikl0ZW0gMSI+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLW1lbnUtaXRlbS1ncm91cD4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFsaXBheSI+CiAgICAgIDxhIGhyZWY9Imh0dHBzOi8vYW50ZHYuY29tIiB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIj4KICAgICAgICBOYXZpZ2F0aW9uIEZvdXIgLSBMaW5rCiAgICAgIDwvYT4KICAgIDwvYS1tZW51LWl0ZW0+CiAgPC9hLW1lbnU+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGN1cnJlbnQgPSByZWY8c3RyaW5nW10+KFsnbWFpbCddKTsKICAgIHJldHVybiB7CiAgICAgIGN1cnJlbnQsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+Cgo=",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUgdi1tb2RlbDpzZWxlY3RlZEtleXM9ImN1cnJlbnQiIG1vZGU9Imhvcml6b250YWwiPgogICAgPGEtbWVudS1pdGVtIGtleT0ibWFpbCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8bWFpbC1vdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIE9uZQogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFwcCIgZGlzYWJsZWQ+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8YXBwc3RvcmUtb3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgTmF2aWdhdGlvbiBUd28KICAgIDwvYS1tZW51LWl0ZW0+CiAgICA8YS1zdWItbWVudT4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxzZXR0aW5nLW91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZSAtIFN1Ym1lbnU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0tZ3JvdXAgdGl0bGU9Ikl0ZW0gMSI+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0ic2V0dGluZzoyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSJzZXR0aW5nOjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPC9hLW1lbnUtaXRlbS1ncm91cD4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLW1lbnUtaXRlbSBrZXk9ImFsaXBheSI+CiAgICAgIDxhIGhyZWY9Imh0dHBzOi8vYW50ZHYuY29tIiB0YXJnZXQ9Il9ibGFuayIgcmVsPSJub29wZW5lciBub3JlZmVycmVyIj4KICAgICAgICBOYXZpZ2F0aW9uIEZvdXIgLSBMaW5rCiAgICAgIDwvYT4KICAgIDwvYS1tZW51LWl0ZW0+CiAgPC9hLW1lbnU+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgY3VycmVudCA9IHJlZihbJ21haWwnXSk7CiAgICByZXR1cm4gewogICAgICBjdXJyZW50LAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(A,{selectedKeys:o.current,"onUpdate:selectedKeys":a[0]||(a[0]=k=>o.current=k),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,null,{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")]),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 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 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 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")]),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 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 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 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})}var sn=Z(tn,[["render",an]]);const en=v({setup(){const o=w({collapsed:!1,selectedKeys:["1"],openKeys:["sub1"],preOpenKeys:["sub1"]});L(()=>o.openKeys,(i,g)=>{o.preOpenKeys=g});const a=()=>{o.collapsed=!o.collapsed,o.openKeys=o.collapsed?[]:o.preOpenKeys};return{...P(o),toggleCollapsed:a}},components:{MenuFoldOutlined:T,MenuUnfoldOutlined:x,PieChartOutlined:f,MailOutlined:h,DesktopOutlined:j,InboxOutlined:F,AppstoreOutlined:V}}),on={style:{width:"256px"}};function pn(o,a,i,g,I,G){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"),k=p("a-sub-menu"),y=p("AppstoreOutlined"),N=p("a-menu"),D=p("demo-box");return d(),W(D,{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:"src/docs/menu/demo/inline-collapsed.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgbW9kZT0iaW5saW5lIgogICAgICB0aGVtZT0iZGFyayIKICAgICAgOmlubGluZS1jb2xsYXBzZWQ9ImNvbGxhcHNlZCIKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICA+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxQaWVDaGFydE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMTwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPERlc2t0b3BPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHNwYW4+T3B0aW9uIDI8L3NwYW4+CiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxJbmJveE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMzwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFR3bzwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTEiPk9wdGlvbiAxMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzLCB3YXRjaCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWVudUZvbGRPdXRsaW5lZCwKICBNZW51VW5mb2xkT3V0bGluZWQsCiAgUGllQ2hhcnRPdXRsaW5lZCwKICBNYWlsT3V0bGluZWQsCiAgRGVza3RvcE91dGxpbmVkLAogIEluYm94T3V0bGluZWQsCiAgQXBwc3RvcmVPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIGNvbGxhcHNlZDogZmFsc2UsCiAgICAgIHNlbGVjdGVkS2V5czogWycxJ10sCiAgICAgIG9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgICAgcHJlT3BlbktleXM6IFsnc3ViMSddLAogICAgfSk7CgogICAgd2F0Y2goCiAgICAgICgpID0+IHN0YXRlLm9wZW5LZXlzLAogICAgICAodmFsLCBvbGRWYWwpID0+IHsKICAgICAgICBzdGF0ZS5wcmVPcGVuS2V5cyA9IG9sZFZhbDsKICAgICAgfSwKICAgICk7CiAgICBjb25zdCB0b2dnbGVDb2xsYXBzZWQgPSAoKSA9PiB7CiAgICAgIHN0YXRlLmNvbGxhcHNlZCA9ICFzdGF0ZS5jb2xsYXBzZWQ7CiAgICAgIHN0YXRlLm9wZW5LZXlzID0gc3RhdGUuY29sbGFwc2VkID8gW10gOiBzdGF0ZS5wcmVPcGVuS2V5czsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgdG9nZ2xlQ29sbGFwc2VkLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogICAgTWFpbE91dGxpbmVkLAogICAgRGVza3RvcE91dGxpbmVkLAogICAgSW5ib3hPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgbW9kZT0iaW5saW5lIgogICAgICB0aGVtZT0iZGFyayIKICAgICAgOmlubGluZS1jb2xsYXBzZWQ9ImNvbGxhcHNlZCIKICAgICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICAgIHYtbW9kZWw6c2VsZWN0ZWRLZXlzPSJzZWxlY3RlZEtleXMiCiAgICA+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxQaWVDaGFydE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMTwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPERlc2t0b3BPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHNwYW4+T3B0aW9uIDI8L3NwYW4+CiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxJbmJveE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8c3Bhbj5PcHRpb24gMzwvc3Bhbj4KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFR3bzwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTEiPk9wdGlvbiAxMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMsIHdhdGNoIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNZW51Rm9sZE91dGxpbmVkLAogIE1lbnVVbmZvbGRPdXRsaW5lZCwKICBQaWVDaGFydE91dGxpbmVkLAogIE1haWxPdXRsaW5lZCwKICBEZXNrdG9wT3V0bGluZWQsCiAgSW5ib3hPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAp9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgY29sbGFwc2VkOiBmYWxzZSwKICAgICAgc2VsZWN0ZWRLZXlzOiBbJzEnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgICBwcmVPcGVuS2V5czogWydzdWIxJ10sCiAgICB9KTsKICAgIHdhdGNoKAogICAgICAoKSA9PiBzdGF0ZS5vcGVuS2V5cywKICAgICAgKHZhbCwgb2xkVmFsKSA9PiB7CiAgICAgICAgc3RhdGUucHJlT3BlbktleXMgPSBvbGRWYWw7CiAgICAgIH0sCiAgICApOwogICAgY29uc3QgdG9nZ2xlQ29sbGFwc2VkID0gKCkgPT4gewogICAgICBzdGF0ZS5jb2xsYXBzZWQgPSAhc3RhdGUuY29sbGFwc2VkOwogICAgICBzdGF0ZS5vcGVuS2V5cyA9IHN0YXRlLmNvbGxhcHNlZCA/IFtdIDogc3RhdGUucHJlT3BlbktleXM7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgdG9nZ2xlQ29sbGFwc2VkLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogICAgTWFpbE91dGxpbmVkLAogICAgRGVza3RvcE91dGxpbmVkLAogICAgSW5ib3hPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[n("div",on,[e(c,{type:"primary",onClick:o.toggleCollapsed,style:{"margin-bottom":"16px"}},{default:s(()=>[o.collapsed?(d(),W(m,{key:0})):(d(),W(l,{key:1}))]),_:1},8,["onClick"]),e(N,{mode:"inline",theme:"dark","inline-collapsed":o.collapsed,openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=K=>o.openKeys=K),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=K=>o.selectedKeys=K)},{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(k,{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(k,{key:"sub2"},{icon:s(()=>[e(y)]),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(k,{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,["inline-collapsed","openKeys","selectedKeys"])])]),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 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"},'"')]),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"},'"')])]),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"},"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 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 punctuation"},">")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{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 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 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 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 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"},'"')]),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"},'"')])]),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"},"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 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 punctuation"},">")]),t(` `),n("span",{class:"token tag"},[n("span",{class:"token tag"},[n("span",{class:"token punctuation"},"<"),t("a-menu-item")]),t(),n("span",{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 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 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 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 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})}var cn=Z(en,[["render",pn]]);const ln=v({setup(){const o=R(["1"]),a=R(["sub1"]),i=I=>{console.log("click",I)},g=I=>{console.log("titleClick",I)};return L(()=>a,I=>{console.log("openKeys",I)}),{selectedKeys:o,openKeys:a,handleClick:i,titleClick:g}},components:{MailOutlined:h,QqOutlined:M,AppstoreOutlined:V,SettingOutlined:S}});function un(o,a,i,g,I,G){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"),k=p("demo-box");return d(),W(k,{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:"src/docs/menu/demo/inline.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIGlkPSJkZGRkZGQiCiAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgbW9kZT0iaW5saW5lIgogICAgQGNsaWNrPSJoYW5kbGVDbGljayIKICA+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiIEB0aXRsZUNsaWNrPSJ0aXRsZUNsaWNrIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxNYWlsT3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8UXFPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5JdGVtIDE8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcyIiB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIiBAdGl0bGVDbGljaz0idGl0bGVDbGljayI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVHdvPC90ZW1wbGF0ZT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViNCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgIDwvYS1zdWItbWVudT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmLCB3YXRjaCB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgUXFPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHNlbGVjdGVkS2V5cyA9IHJlZjxzdHJpbmdbXT4oWycxJ10pOwogICAgY29uc3Qgb3BlbktleXMgPSByZWY8c3RyaW5nW10+KFsnc3ViMSddKTsKICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gKGU6IEV2ZW50KSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdjbGljaycsIGUpOwogICAgfTsKICAgIGNvbnN0IHRpdGxlQ2xpY2sgPSAoZTogRXZlbnQpID0+IHsKICAgICAgY29uc29sZS5sb2coJ3RpdGxlQ2xpY2snLCBlKTsKICAgIH07CiAgICB3YXRjaCgKICAgICAgKCkgPT4gb3BlbktleXMsCiAgICAgIHZhbCA9PiB7CiAgICAgICAgY29uc29sZS5sb2coJ29wZW5LZXlzJywgdmFsKTsKICAgICAgfSwKICAgICk7CiAgICByZXR1cm4gewogICAgICBzZWxlY3RlZEtleXMsCiAgICAgIG9wZW5LZXlzLAoKICAgICAgaGFuZGxlQ2xpY2ssCiAgICAgIHRpdGxlQ2xpY2ssCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgUXFPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIGlkPSJkZGRkZGQiCiAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgdi1tb2RlbDpvcGVuS2V5cz0ib3BlbktleXMiCiAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgbW9kZT0iaW5saW5lIgogICAgQGNsaWNrPSJoYW5kbGVDbGljayIKICA+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjEiIEB0aXRsZUNsaWNrPSJ0aXRsZUNsaWNrIj4KICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgIDxNYWlsT3V0bGluZWQgLz4KICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIE9uZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8UXFPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5JdGVtIDE8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEiPk9wdGlvbiAxPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj5PcHRpb24gMjwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1tZW51LWl0ZW0tZ3JvdXA+CiAgICAgIDxhLW1lbnUtaXRlbS1ncm91cCBrZXk9ImcyIiB0aXRsZT0iSXRlbSAyIj4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICA8L2EtbWVudS1pdGVtLWdyb3VwPgogICAgPC9hLXN1Yi1tZW51PgogICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIiBAdGl0bGVDbGljaz0idGl0bGVDbGljayI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVHdvPC90ZW1wbGF0ZT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1zdWItbWVudT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViNCI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8U2V0dGluZ091dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjkiPk9wdGlvbiA5PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxMiI+T3B0aW9uIDEyPC9hLW1lbnUtaXRlbT4KICAgIDwvYS1zdWItbWVudT4KICA8L2EtbWVudT4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWYsIHdhdGNoIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBRcU91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc2VsZWN0ZWRLZXlzID0gcmVmKFsnMSddKTsKICAgIGNvbnN0IG9wZW5LZXlzID0gcmVmKFsnc3ViMSddKTsKICAgIGNvbnN0IGhhbmRsZUNsaWNrID0gZSA9PiB7CiAgICAgIGNvbnNvbGUubG9nKCdjbGljaycsIGUpOwogICAgfTsKICAgIGNvbnN0IHRpdGxlQ2xpY2sgPSBlID0+IHsKICAgICAgY29uc29sZS5sb2coJ3RpdGxlQ2xpY2snLCBlKTsKICAgIH07CiAgICB3YXRjaCgKICAgICAgKCkgPT4gb3BlbktleXMsCiAgICAgIHZhbCA9PiB7CiAgICAgICAgY29uc29sZS5sb2coJ29wZW5LZXlzJywgdmFsKTsKICAgICAgfSwKICAgICk7CiAgICByZXR1cm4gewogICAgICBzZWxlY3RlZEtleXMsCiAgICAgIG9wZW5LZXlzLAogICAgICBoYW5kbGVDbGljaywKICAgICAgdGl0bGVDbGljaywKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBRcU91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{default:s(()=>[e(b,{id:"dddddd",style:{width:"256px"},openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=y=>o.openKeys=y),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=y=>o.selectedKeys=y),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 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"},[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"},"@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"},"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 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 function-variable function"},"handleClick"),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"},"'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(` `),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),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"},","),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(` 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 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 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 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"},[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"},"@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 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(` `),n("span",{class:"token punctuation"},"("),n("span",{class:"token punctuation"},")"),t(),n("span",{class:"token operator"},"=>"),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"},","),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(` 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 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 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})}var kn=Z(ln,[["render",un]]);const gn=v({setup(){const o=w({rootSubmenuKeys:["sub1","sub2","sub4"],openKeys:["sub1"],selectedKeys:[]}),a=i=>{const g=i.find(I=>o.openKeys.indexOf(I)===-1);o.rootSubmenuKeys.indexOf(g)===-1?o.openKeys=i:o.openKeys=g?[g]:[]};return{...P(o),onOpenChange:a}},components:{MailOutlined:h,AppstoreOutlined:V,SettingOutlined:S}});function rn(o,a,i,g,I,G){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(),W(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:"src/docs/menu/demo/sider-current.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgQG9wZW5DaGFuZ2U9Im9uT3BlbkNoYW5nZSIKICAgID4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+T3B0aW9uIDI8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI0Ij5PcHRpb24gNDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjQiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEyIj5PcHRpb24gMTI8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmVmcyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7IE1haWxPdXRsaW5lZCwgQXBwc3RvcmVPdXRsaW5lZCwgU2V0dGluZ091dGxpbmVkIH0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICByb290U3VibWVudUtleXM6IFsnc3ViMScsICdzdWIyJywgJ3N1YjQnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgICBzZWxlY3RlZEtleXM6IFtdLAogICAgfSk7CiAgICBjb25zdCBvbk9wZW5DaGFuZ2UgPSAob3BlbktleXM6IHN0cmluZ1tdKSA9PiB7CiAgICAgIGNvbnN0IGxhdGVzdE9wZW5LZXkgPSBvcGVuS2V5cy5maW5kKGtleSA9PiBzdGF0ZS5vcGVuS2V5cy5pbmRleE9mKGtleSkgPT09IC0xKTsKICAgICAgaWYgKHN0YXRlLnJvb3RTdWJtZW51S2V5cy5pbmRleE9mKGxhdGVzdE9wZW5LZXkhKSA9PT0gLTEpIHsKICAgICAgICBzdGF0ZS5vcGVuS2V5cyA9IG9wZW5LZXlzOwogICAgICB9IGVsc2UgewogICAgICAgIHN0YXRlLm9wZW5LZXlzID0gbGF0ZXN0T3BlbktleSA/IFtsYXRlc3RPcGVuS2V5XSA6IFtdOwogICAgICB9CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgb25PcGVuQ2hhbmdlLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgQG9wZW5DaGFuZ2U9Im9uT3BlbkNoYW5nZSIKICAgID4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gT25lPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj5PcHRpb24gMTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+T3B0aW9uIDI8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjMiPk9wdGlvbiAzPC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI0Ij5PcHRpb24gNDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+PC90ZW1wbGF0ZT4KICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMyIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjQiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjExIj5PcHRpb24gMTE8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEyIj5PcHRpb24gMTI8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsgTWFpbE91dGxpbmVkLCBBcHBzdG9yZU91dGxpbmVkLCBTZXR0aW5nT3V0bGluZWQgfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIHJvb3RTdWJtZW51S2V5czogWydzdWIxJywgJ3N1YjInLCAnc3ViNCddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICAgIHNlbGVjdGVkS2V5czogW10sCiAgICB9KTsKICAgIGNvbnN0IG9uT3BlbkNoYW5nZSA9IG9wZW5LZXlzID0+IHsKICAgICAgY29uc3QgbGF0ZXN0T3BlbktleSA9IG9wZW5LZXlzLmZpbmQoa2V5ID0+IHN0YXRlLm9wZW5LZXlzLmluZGV4T2Yoa2V5KSA9PT0gLTEpOwogICAgICBpZiAoc3RhdGUucm9vdFN1Ym1lbnVLZXlzLmluZGV4T2YobGF0ZXN0T3BlbktleSkgPT09IC0xKSB7CiAgICAgICAgc3RhdGUub3BlbktleXMgPSBvcGVuS2V5czsKICAgICAgfSBlbHNlIHsKICAgICAgICBzdGF0ZS5vcGVuS2V5cyA9IGxhdGVzdE9wZW5LZXkgPyBbbGF0ZXN0T3BlbktleV0gOiBbXTsKICAgICAgfQogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIG9uT3BlbkNoYW5nZSwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBBcHBzdG9yZU91dGxpbmVkLAogICAgU2V0dGluZ091dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[n("div",null,[e(r,{style:{width:"256px"},mode:"inline",openKeys:o.openKeys,selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[0]||(a[0]=b=>o.selectedKeys=b),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,["openKeys","selectedKeys","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 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"},":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"},"@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 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 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 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 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"},":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"},"@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 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 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 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})}var dn=Z(gn,[["render",rn]]);const In=v({setup(){const o=w({mode:"inline",theme:"light",selectedKeys:["1"],openKeys:["sub1"]}),a=g=>{o.mode=g?"vertical":"inline"},i=g=>{o.theme=g?"dark":"light"};return{...P(o),changeMode:a,changeTheme:i}},components:{MailOutlined:h,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S}});function mn(o,a,i,g,I,G){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"),k=p("demo-box");return d(),W(k,{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:"src/docs/menu/demo/switch-mode.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2ggOmNoZWNrZWQ9Im1vZGUgPT09ICd2ZXJ0aWNhbCciIEBjaGFuZ2U9ImNoYW5nZU1vZGUiIC8+CiAgICBDaGFuZ2UgTW9kZQogICAgPHNwYW4gY2xhc3M9ImFudC1kaXZpZGVyIiBzdHlsZT0ibWFyZ2luOiAwIDFlbSIgLz4KICAgIDxhLXN3aXRjaCA6Y2hlY2tlZD0idGhlbWUgPT09ICdkYXJrJyIgQGNoYW5nZT0iY2hhbmdlVGhlbWUiIC8+CiAgICBDaGFuZ2UgVGhlbWUKICAgIDxiciAvPgogICAgPGJyIC8+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgICA6bW9kZT0ibW9kZSIKICAgICAgOnRoZW1lPSJ0aGVtZSIKICAgID4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBPbmUKICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPENhbGVuZGFyT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjEtMiIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgoKICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIG1vZGU6ICdpbmxpbmUnLAogICAgICB0aGVtZTogJ2xpZ2h0JywKICAgICAgc2VsZWN0ZWRLZXlzOiBbJzEnXSwKICAgICAgb3BlbktleXM6IFsnc3ViMSddLAogICAgfSk7CiAgICBjb25zdCBjaGFuZ2VNb2RlID0gKGNoZWNrZWQ6IGJvb2xlYW4pID0+IHsKICAgICAgc3RhdGUubW9kZSA9IGNoZWNrZWQgPyAndmVydGljYWwnIDogJ2lubGluZSc7CiAgICB9OwogICAgY29uc3QgY2hhbmdlVGhlbWUgPSAoY2hlY2tlZDogYm9vbGVhbikgPT4gewogICAgICBzdGF0ZS50aGVtZSA9IGNoZWNrZWQgPyAnZGFyaycgOiAnbGlnaHQnOwogICAgfTsKICAgIHJldHVybiB7CiAgICAgIC4uLnRvUmVmcyhzdGF0ZSksCiAgICAgIGNoYW5nZU1vZGUsCiAgICAgIGNoYW5nZVRoZW1lLAogICAgfTsKICB9LAogIGNvbXBvbmVudHM6IHsKICAgIE1haWxPdXRsaW5lZCwKICAgIENhbGVuZGFyT3V0bGluZWQsCiAgICBBcHBzdG9yZU91dGxpbmVkLAogICAgU2V0dGluZ091dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2ggOmNoZWNrZWQ9Im1vZGUgPT09ICd2ZXJ0aWNhbCciIEBjaGFuZ2U9ImNoYW5nZU1vZGUiIC8+CiAgICBDaGFuZ2UgTW9kZQogICAgPHNwYW4gY2xhc3M9ImFudC1kaXZpZGVyIiBzdHlsZT0ibWFyZ2luOiAwIDFlbSIgLz4KICAgIDxhLXN3aXRjaCA6Y2hlY2tlZD0idGhlbWUgPT09ICdkYXJrJyIgQGNoYW5nZT0iY2hhbmdlVGhlbWUiIC8+CiAgICBDaGFuZ2UgVGhlbWUKICAgIDxiciAvPgogICAgPGJyIC8+CiAgICA8YS1tZW51CiAgICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgICB2LW1vZGVsOnNlbGVjdGVkS2V5cz0ic2VsZWN0ZWRLZXlzIgogICAgICA6bW9kZT0ibW9kZSIKICAgICAgOnRoZW1lPSJ0aGVtZSIKICAgID4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPE1haWxPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBPbmUKICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPENhbGVuZGFyT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIE5hdmlnYXRpb24gVHdvCiAgICAgIDwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPEFwcHN0b3JlT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSAjdGl0bGU+TmF2aWdhdGlvbiBUaHJlZTwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMyI+T3B0aW9uIDM8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1zdWItbWVudSBrZXk9InN1YjEtMiIgdGl0bGU9IlN1Ym1lbnUiPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNSI+T3B0aW9uIDU8L2EtbWVudS1pdGVtPgogICAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICAgIDwvYS1zdWItbWVudT4KICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgIDxTZXR0aW5nT3V0bGluZWQgLz4KICAgICAgICA8L3RlbXBsYXRlPgoKICAgICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNyI+T3B0aW9uIDc8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjgiPk9wdGlvbiA4PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iMTAiPk9wdGlvbiAxMDwvYS1tZW51LWl0ZW0+CiAgICAgIDwvYS1zdWItbWVudT4KICAgIDwvYS1tZW51PgogIDwvZGl2Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwppbXBvcnQgewogIE1haWxPdXRsaW5lZCwKICBDYWxlbmRhck91dGxpbmVkLAogIEFwcHN0b3JlT3V0bGluZWQsCiAgU2V0dGluZ091dGxpbmVkLAp9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgbW9kZTogJ2lubGluZScsCiAgICAgIHRoZW1lOiAnbGlnaHQnLAogICAgICBzZWxlY3RlZEtleXM6IFsnMSddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICB9KTsKICAgIGNvbnN0IGNoYW5nZU1vZGUgPSBjaGVja2VkID0+IHsKICAgICAgc3RhdGUubW9kZSA9IGNoZWNrZWQgPyAndmVydGljYWwnIDogJ2lubGluZSc7CiAgICB9OwogICAgY29uc3QgY2hhbmdlVGhlbWUgPSBjaGVja2VkID0+IHsKICAgICAgc3RhdGUudGhlbWUgPSBjaGVja2VkID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH07CiAgICByZXR1cm4gewogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgICBjaGFuZ2VNb2RlLAogICAgICBjaGFuZ2VUaGVtZSwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBDYWxlbmRhck91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{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,{style:{width:"256px"},openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=y=>o.openKeys=y),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=y=>o.selectedKeys=y),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 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"},[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("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"},"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 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 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 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 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 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"},[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("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 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 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 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 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})}var Cn=Z(In,[["render",mn]]);const An=v({setup(){const o=w({theme:"dark",selectedKeys:["1"],openKeys:["sub1"]}),a=i=>{o.theme=i?"dark":"light"};return{...P(o),changeTheme:a}},components:{MailOutlined:h,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S}});function bn(o,a,i,g,I,G){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"),k=p("demo-box");return d(),W(k,{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:"src/docs/menu/demo/theme.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2gKICAgICAgOmNoZWNrZWQ9InRoZW1lID09PSAnZGFyayciCiAgICAgIGNoZWNrZWQtY2hpbGRyZW49IkRhcmsiCiAgICAgIHVuLWNoZWNrZWQtY2hpbGRyZW49IkxpZ2h0IgogICAgICBAY2hhbmdlPSJjaGFuZ2VUaGVtZSIKICAgIC8+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtbWVudQogICAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgbW9kZT0iaW5saW5lIgogICAgICA6dGhlbWU9InRoZW1lIgogICAgPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICBOYXZpZ2F0aW9uIE9uZQogICAgICA8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBUd28KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMS0yIiB0aXRsZT0iU3VibWVudSI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIEZvdXI8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdCBsYW5nPSJ0cyI+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVhY3RpdmUsIHRvUmVmcyB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWFpbE91dGxpbmVkLAogIENhbGVuZGFyT3V0bGluZWQsCiAgQXBwc3RvcmVPdXRsaW5lZCwKICBTZXR0aW5nT3V0bGluZWQsCn0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IHN0YXRlID0gcmVhY3RpdmUoewogICAgICB0aGVtZTogJ2RhcmsnLAogICAgICBzZWxlY3RlZEtleXM6IFsnMSddLAogICAgICBvcGVuS2V5czogWydzdWIxJ10sCiAgICB9KTsKICAgIGNvbnN0IGNoYW5nZVRoZW1lID0gKGNoZWNrZWQ6IGJvb2xlYW4pID0+IHsKICAgICAgc3RhdGUudGhlbWUgPSBjaGVja2VkID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH07CgogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgY2hhbmdlVGhlbWUsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXY+CiAgICA8YS1zd2l0Y2gKICAgICAgOmNoZWNrZWQ9InRoZW1lID09PSAnZGFyayciCiAgICAgIGNoZWNrZWQtY2hpbGRyZW49IkRhcmsiCiAgICAgIHVuLWNoZWNrZWQtY2hpbGRyZW49IkxpZ2h0IgogICAgICBAY2hhbmdlPSJjaGFuZ2VUaGVtZSIKICAgIC8+CiAgICA8YnIgLz4KICAgIDxiciAvPgogICAgPGEtbWVudQogICAgICBzdHlsZT0id2lkdGg6IDI1NnB4IgogICAgICB2LW1vZGVsOm9wZW5LZXlzPSJvcGVuS2V5cyIKICAgICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgICAgbW9kZT0iaW5saW5lIgogICAgICA6dGhlbWU9InRoZW1lIgogICAgPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICBOYXZpZ2F0aW9uIE9uZQogICAgICA8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIyIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgTmF2aWdhdGlvbiBUd28KICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxIj4KICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIFRocmVlPC90ZW1wbGF0ZT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNCI+T3B0aW9uIDQ8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMS0yIiB0aXRsZT0iU3VibWVudSI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI2Ij5PcHRpb24gNjwvYS1tZW51LWl0ZW0+CiAgICAgICAgPC9hLXN1Yi1tZW51PgogICAgICA8L2Etc3ViLW1lbnU+CiAgICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMiI+CiAgICAgICAgPHRlbXBsYXRlICNpY29uPgogICAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlICN0aXRsZT5OYXZpZ2F0aW9uIEZvdXI8L3RlbXBsYXRlPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI4Ij5PcHRpb24gODwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iOSI+T3B0aW9uIDk8L2EtbWVudS1pdGVtPgogICAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2EtbWVudT4KICA8L2Rpdj4KPC90ZW1wbGF0ZT4KPHNjcmlwdD4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3Qgc3RhdGUgPSByZWFjdGl2ZSh7CiAgICAgIHRoZW1lOiAnZGFyaycsCiAgICAgIHNlbGVjdGVkS2V5czogWycxJ10sCiAgICAgIG9wZW5LZXlzOiBbJ3N1YjEnXSwKICAgIH0pOwogICAgY29uc3QgY2hhbmdlVGhlbWUgPSBjaGVja2VkID0+IHsKICAgICAgc3RhdGUudGhlbWUgPSBjaGVja2VkID8gJ2RhcmsnIDogJ2xpZ2h0JzsKICAgIH07CiAgICByZXR1cm4gewogICAgICAuLi50b1JlZnMoc3RhdGUpLAogICAgICBjaGFuZ2VUaGVtZSwKICAgIH07CiAgfSwKICBjb21wb25lbnRzOiB7CiAgICBNYWlsT3V0bGluZWQsCiAgICBDYWxlbmRhck91dGxpbmVkLAogICAgQXBwc3RvcmVPdXRsaW5lZCwKICAgIFNldHRpbmdPdXRsaW5lZCwKICB9LAp9KTsKPC9zY3JpcHQ+"}},{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,{style:{width:"256px"},openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=y=>o.openKeys=y),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=y=>o.selectedKeys=y),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 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"},[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("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"},"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 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 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 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 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 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"},[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("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 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 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 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 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})}var Wn=Z(An,[["render",bn]]);const yn=v({setup(){const o=w({selectedKeys:[],openKeys:[]}),a=i=>{console.log("click ",i)};return{...P(o),handleClick:a}},components:{MailOutlined:h,CalendarOutlined:B,AppstoreOutlined:V,SettingOutlined:S}});function Zn(o,a,i,g,I,G){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(),W(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:"src/docs/menu/demo/vertical.vue",sourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICBtb2RlPSJ2ZXJ0aWNhbCIKICAgIEBjbGljaz0iaGFuZGxlQ2xpY2siCiAgPgogICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIE5hdmlnYXRpb24gT25lCiAgICA8L2EtbWVudS1pdGVtPgogICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIFR3bwogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxLTIiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2Etc3ViLW1lbnU+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgPC9hLXN1Yi1tZW51PgogIDwvYS1tZW51Pgo8L3RlbXBsYXRlPgo8c2NyaXB0IGxhbmc9InRzIj4KaW1wb3J0IHsgZGVmaW5lQ29tcG9uZW50LCByZWFjdGl2ZSwgdG9SZWZzLCBWTm9kZUNoaWxkIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNYWlsT3V0bGluZWQsCiAgQ2FsZW5kYXJPdXRsaW5lZCwKICBBcHBzdG9yZU91dGxpbmVkLAogIFNldHRpbmdPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwoKaW50ZXJmYWNlIE1lbnVJbmZvIHsKICBrZXk6IHN0cmluZzsKICBrZXlQYXRoOiBzdHJpbmdbXTsKICBpdGVtOiBWTm9kZUNoaWxkOwogIGRvbUV2ZW50OiBNb3VzZUV2ZW50Owp9CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgc2VsZWN0ZWRLZXlzOiBbXSwKICAgICAgb3BlbktleXM6IFtdLAogICAgfSk7CiAgICBjb25zdCBoYW5kbGVDbGljayA9IChlOiBNZW51SW5mbykgPT4gewogICAgICBjb25zb2xlLmxvZygnY2xpY2sgJywgZSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgaGFuZGxlQ2xpY2ssCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0PgoK",jsSourceCode:"PHRlbXBsYXRlPgogIDxhLW1lbnUKICAgIHYtbW9kZWw6b3BlbktleXM9Im9wZW5LZXlzIgogICAgdi1tb2RlbDpzZWxlY3RlZEtleXM9InNlbGVjdGVkS2V5cyIKICAgIHN0eWxlPSJ3aWR0aDogMjU2cHgiCiAgICBtb2RlPSJ2ZXJ0aWNhbCIKICAgIEBjbGljaz0iaGFuZGxlQ2xpY2siCiAgPgogICAgPGEtbWVudS1pdGVtIGtleT0iMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8TWFpbE91dGxpbmVkIC8+CiAgICAgIDwvdGVtcGxhdGU+CiAgICAgIE5hdmlnYXRpb24gT25lCiAgICA8L2EtbWVudS1pdGVtPgogICAgPGEtbWVudS1pdGVtIGtleT0iMiI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8Q2FsZW5kYXJPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICBOYXZpZ2F0aW9uIFR3bwogICAgPC9hLW1lbnUtaXRlbT4KICAgIDxhLXN1Yi1tZW51IGtleT0ic3ViMSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICA8QXBwc3RvcmVPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gVGhyZWU8L3RlbXBsYXRlPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSIzIj5PcHRpb24gMzwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjQiPk9wdGlvbiA0PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtc3ViLW1lbnUga2V5PSJzdWIxLTIiIHRpdGxlPSJTdWJtZW51Ij4KICAgICAgICA8YS1tZW51LWl0ZW0ga2V5PSI1Ij5PcHRpb24gNTwvYS1tZW51LWl0ZW0+CiAgICAgICAgPGEtbWVudS1pdGVtIGtleT0iNiI+T3B0aW9uIDY8L2EtbWVudS1pdGVtPgogICAgICA8L2Etc3ViLW1lbnU+CiAgICA8L2Etc3ViLW1lbnU+CiAgICA8YS1zdWItbWVudSBrZXk9InN1YjIiPgogICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgPFNldHRpbmdPdXRsaW5lZCAvPgogICAgICA8L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPk5hdmlnYXRpb24gRm91cjwvdGVtcGxhdGU+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjciPk9wdGlvbiA3PC9hLW1lbnUtaXRlbT4KICAgICAgPGEtbWVudS1pdGVtIGtleT0iOCI+T3B0aW9uIDg8L2EtbWVudS1pdGVtPgogICAgICA8YS1tZW51LWl0ZW0ga2V5PSI5Ij5PcHRpb24gOTwvYS1tZW51LWl0ZW0+CiAgICAgIDxhLW1lbnUtaXRlbSBrZXk9IjEwIj5PcHRpb24gMTA8L2EtbWVudS1pdGVtPgogICAgPC9hLXN1Yi1tZW51PgogIDwvYS1tZW51Pgo8L3RlbXBsYXRlPgo8c2NyaXB0PgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlYWN0aXZlLCB0b1JlZnMgfSBmcm9tICd2dWUnOwppbXBvcnQgewogIE1haWxPdXRsaW5lZCwKICBDYWxlbmRhck91dGxpbmVkLAogIEFwcHN0b3JlT3V0bGluZWQsCiAgU2V0dGluZ091dGxpbmVkLAp9IGZyb20gJ0BhbnQtZGVzaWduL2ljb25zLXZ1ZSc7CmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbXBvbmVudCh7CiAgc2V0dXAoKSB7CiAgICBjb25zdCBzdGF0ZSA9IHJlYWN0aXZlKHsKICAgICAgc2VsZWN0ZWRLZXlzOiBbXSwKICAgICAgb3BlbktleXM6IFtdLAogICAgfSk7CiAgICBjb25zdCBoYW5kbGVDbGljayA9IGUgPT4gewogICAgICBjb25zb2xlLmxvZygnY2xpY2sgJywgZSk7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgLi4udG9SZWZzKHN0YXRlKSwKICAgICAgaGFuZGxlQ2xpY2ssCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgTWFpbE91dGxpbmVkLAogICAgQ2FsZW5kYXJPdXRsaW5lZCwKICAgIEFwcHN0b3JlT3V0bGluZWQsCiAgICBTZXR0aW5nT3V0bGluZWQsCiAgfSwKfSk7Cjwvc2NyaXB0Pg=="}},{default:s(()=>[e(A,{openKeys:o.openKeys,"onUpdate:openKeys":a[0]||(a[0]=k=>o.openKeys=k),selectedKeys:o.selectedKeys,"onUpdate:selectedKeys":a[1]||(a[1]=k=>o.selectedKeys=k),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(" VNodeChild "),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"},"interface"),t(),n("span",{class:"token class-name"},"MenuInfo"),t(),n("span",{class:"token punctuation"},"{"),t(` `),n("span",{class:"token literal-property property"},"key"),n("span",{class:"token operator"},":"),t(" string"),n("span",{class:"token punctuation"},";"),t(` `),n("span",{class:"token literal-property property"},"keyPath"),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 literal-property property"},"item"),n("span",{class:"token operator"},":"),t(" VNodeChild"),n("span",{class:"token punctuation"},";"),t(` `),n("span",{class:"token literal-property property"},"domEvent"),n("span",{class:"token operator"},":"),t(" MouseEvent"),n("span",{class:"token punctuation"},";"),t(` `),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 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 punctuation"},"("),n("span",{class:"token parameter"},[n("span",{class:"token literal-property property"},"e"),n("span",{class:"token operator"},":"),t(" MenuInfo")]),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"},"'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"},"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 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 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 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 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"},"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"},"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 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 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})}var Gn=Z(yn,[["render",Zn]]);const vn={name:"SubMenu",props:{menuInfo:{type:Object,default:()=>({})}},template:` `,components:{PieChartOutlined:f,MailOutlined:h}},hn=[{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({setup(){const o=R(!1);return{list:hn,collapsed:o,toggleCollapsed:()=>{o.value=!o.value}}},components:{"sub-menu":vn,MenuFoldOutlined:T,MenuUnfoldOutlined:x,PieChartOutlined:f}}),Sn={style:{width:"256px"}};function wn(o,a,i,g,I,G){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(),W(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:"src/docs/menu/demo/template.vue",sourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgOmRlZmF1bHQtc2VsZWN0ZWQta2V5cz0iWycxJ10iCiAgICAgIDpkZWZhdWx0LW9wZW4ta2V5cz0iWycyJ10iCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBsaXN0IiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6bWVudS1pbmZvPSJpdGVtIiA6a2V5PSJpdGVtLmtleSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQgbGFuZz0idHMiPgppbXBvcnQgeyBkZWZpbmVDb21wb25lbnQsIHJlZiB9IGZyb20gJ3Z1ZSc7CmltcG9ydCB7CiAgTWVudUZvbGRPdXRsaW5lZCwKICBNZW51VW5mb2xkT3V0bGluZWQsCiAgUGllQ2hhcnRPdXRsaW5lZCwKICBNYWlsT3V0bGluZWQsCn0gZnJvbSAnQGFudC1kZXNpZ24vaWNvbnMtdnVlJzsKCi8vIHlvdSBjYW4gcmV3cml0ZSBpdCB0byBhIHNpbmdsZSBmaWxlIGNvbXBvbmVudCwgaWYgbm90LCB5b3Ugc2hvdWxkIGNvbmZpZyB2dWUgYWxpYXMgdG8gdnVlL2Rpc3QvdnVlLmVzbS1idW5kbGVyLmpzCmNvbnN0IFN1Yk1lbnUgPSB7CiAgbmFtZTogJ1N1Yk1lbnUnLAogIHByb3BzOiB7CiAgICBtZW51SW5mbzogewogICAgICB0eXBlOiBPYmplY3QsCiAgICAgIGRlZmF1bHQ6ICgpID0+ICh7fSksCiAgICB9LAogIH0sCiAgdGVtcGxhdGU6IGAKICAgIDxhLXN1Yi1tZW51IDprZXk9Im1lbnVJbmZvLmtleSI+CiAgICAgIDx0ZW1wbGF0ZSAjaWNvbj48TWFpbE91dGxpbmVkIC8+PC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlICN0aXRsZT57eyBtZW51SW5mby50aXRsZSB9fTwvdGVtcGxhdGU+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBtZW51SW5mby5jaGlsZHJlbiIgOmtleT0iaXRlbS5rZXkiPgogICAgICAgIDx0ZW1wbGF0ZSB2LWlmPSIhaXRlbS5jaGlsZHJlbiI+CiAgICAgICAgICA8YS1tZW51LWl0ZW0gOmtleT0iaXRlbS5rZXkiPgogICAgICAgICAgICA8dGVtcGxhdGUgI2ljb24+CiAgICAgICAgICAgICAgPFBpZUNoYXJ0T3V0bGluZWQgLz4KICAgICAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgICAgICAge3sgaXRlbS50aXRsZSB9fQogICAgICAgICAgPC9hLW1lbnUtaXRlbT4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgIDx0ZW1wbGF0ZSB2LWVsc2U+CiAgICAgICAgICA8c3ViLW1lbnUgOm1lbnUtaW5mbz0iaXRlbSIgOmtleT0iaXRlbS5rZXkiIC8+CiAgICAgICAgPC90ZW1wbGF0ZT4KICAgICAgPC90ZW1wbGF0ZT4KICAgIDwvYS1zdWItbWVudT4KICBgLAogIGNvbXBvbmVudHM6IHsKICAgIFBpZUNoYXJ0T3V0bGluZWQsCiAgICBNYWlsT3V0bGluZWQsCiAgfSwKfTsKY29uc3QgbGlzdCA9IFsKICB7CiAgICBrZXk6ICcxJywKICAgIHRpdGxlOiAnT3B0aW9uIDEnLAogIH0sCiAgewogICAga2V5OiAnMicsCiAgICB0aXRsZTogJ05hdmlnYXRpb24gMicsCiAgICBjaGlsZHJlbjogWwogICAgICB7CiAgICAgICAga2V5OiAnMi4xJywKICAgICAgICB0aXRsZTogJ05hdmlnYXRpb24gMycsCiAgICAgICAgY2hpbGRyZW46IFt7IGtleTogJzIuMS4xJywgdGl0bGU6ICdPcHRpb24gMi4xLjEnIH1dLAogICAgICB9LAogICAgXSwKICB9LApdOwpleHBvcnQgZGVmYXVsdCBkZWZpbmVDb21wb25lbnQoewogIHNldHVwKCkgewogICAgY29uc3QgY29sbGFwc2VkID0gcmVmPGJvb2xlYW4+KGZhbHNlKTsKCiAgICBjb25zdCB0b2dnbGVDb2xsYXBzZWQgPSAoKSA9PiB7CiAgICAgIGNvbGxhcHNlZC52YWx1ZSA9ICFjb2xsYXBzZWQudmFsdWU7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgbGlzdCwKICAgICAgY29sbGFwc2VkLAogICAgICB0b2dnbGVDb2xsYXBzZWQsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgJ3N1Yi1tZW51JzogU3ViTWVudSwKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4KCg==",jsSourceCode:"PHRlbXBsYXRlPgogIDxkaXYgc3R5bGU9IndpZHRoOiAyNTZweCI+CiAgICA8YS1idXR0b24gdHlwZT0icHJpbWFyeSIgQGNsaWNrPSJ0b2dnbGVDb2xsYXBzZWQiIHN0eWxlPSJtYXJnaW4tYm90dG9tOiAxNnB4Ij4KICAgICAgPE1lbnVVbmZvbGRPdXRsaW5lZCB2LWlmPSJjb2xsYXBzZWQiIC8+CiAgICAgIDxNZW51Rm9sZE91dGxpbmVkIHYtZWxzZSAvPgogICAgPC9hLWJ1dHRvbj4KICAgIDxhLW1lbnUKICAgICAgOmRlZmF1bHQtc2VsZWN0ZWQta2V5cz0iWycxJ10iCiAgICAgIDpkZWZhdWx0LW9wZW4ta2V5cz0iWycyJ10iCiAgICAgIG1vZGU9ImlubGluZSIKICAgICAgdGhlbWU9ImRhcmsiCiAgICAgIDppbmxpbmUtY29sbGFwc2VkPSJjb2xsYXBzZWQiCiAgICA+CiAgICAgIDx0ZW1wbGF0ZSB2LWZvcj0iaXRlbSBpbiBsaXN0IiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6bWVudS1pbmZvPSJpdGVtIiA6a2V5PSJpdGVtLmtleSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLW1lbnU+CiAgPC9kaXY+CjwvdGVtcGxhdGU+CjxzY3JpcHQ+CmltcG9ydCB7IGRlZmluZUNvbXBvbmVudCwgcmVmIH0gZnJvbSAndnVlJzsKaW1wb3J0IHsKICBNZW51Rm9sZE91dGxpbmVkLAogIE1lbnVVbmZvbGRPdXRsaW5lZCwKICBQaWVDaGFydE91dGxpbmVkLAogIE1haWxPdXRsaW5lZCwKfSBmcm9tICdAYW50LWRlc2lnbi9pY29ucy12dWUnOwoKLy8geW91IGNhbiByZXdyaXRlIGl0IHRvIGEgc2luZ2xlIGZpbGUgY29tcG9uZW50LCBpZiBub3QsIHlvdSBzaG91bGQgY29uZmlnIHZ1ZSBhbGlhcyB0byB2dWUvZGlzdC92dWUuZXNtLWJ1bmRsZXIuanMKY29uc3QgU3ViTWVudSA9IHsKICBuYW1lOiAnU3ViTWVudScsCiAgcHJvcHM6IHsKICAgIG1lbnVJbmZvOiB7CiAgICAgIHR5cGU6IE9iamVjdCwKICAgICAgZGVmYXVsdDogKCkgPT4gKHt9KSwKICAgIH0sCiAgfSwKICB0ZW1wbGF0ZTogYAogICAgPGEtc3ViLW1lbnUgOmtleT0ibWVudUluZm8ua2V5Ij4KICAgICAgPHRlbXBsYXRlICNpY29uPjxNYWlsT3V0bGluZWQgLz48L3RlbXBsYXRlPgogICAgICA8dGVtcGxhdGUgI3RpdGxlPnt7IG1lbnVJbmZvLnRpdGxlIH19PC90ZW1wbGF0ZT4KICAgICAgPHRlbXBsYXRlIHYtZm9yPSJpdGVtIGluIG1lbnVJbmZvLmNoaWxkcmVuIiA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgPHRlbXBsYXRlIHYtaWY9IiFpdGVtLmNoaWxkcmVuIj4KICAgICAgICAgIDxhLW1lbnUtaXRlbSA6a2V5PSJpdGVtLmtleSI+CiAgICAgICAgICAgIDx0ZW1wbGF0ZSAjaWNvbj4KICAgICAgICAgICAgICA8UGllQ2hhcnRPdXRsaW5lZCAvPgogICAgICAgICAgICA8L3RlbXBsYXRlPgogICAgICAgICAgICB7eyBpdGVtLnRpdGxlIH19CiAgICAgICAgICA8L2EtbWVudS1pdGVtPgogICAgICAgIDwvdGVtcGxhdGU+CiAgICAgICAgPHRlbXBsYXRlIHYtZWxzZT4KICAgICAgICAgIDxzdWItbWVudSA6bWVudS1pbmZvPSJpdGVtIiA6a2V5PSJpdGVtLmtleSIgLz4KICAgICAgICA8L3RlbXBsYXRlPgogICAgICA8L3RlbXBsYXRlPgogICAgPC9hLXN1Yi1tZW51PgogIGAsCiAgY29tcG9uZW50czogewogICAgUGllQ2hhcnRPdXRsaW5lZCwKICAgIE1haWxPdXRsaW5lZCwKICB9LAp9Owpjb25zdCBsaXN0ID0gWwogIHsKICAgIGtleTogJzEnLAogICAgdGl0bGU6ICdPcHRpb24gMScsCiAgfSwKICB7CiAgICBrZXk6ICcyJywKICAgIHRpdGxlOiAnTmF2aWdhdGlvbiAyJywKICAgIGNoaWxkcmVuOiBbCiAgICAgIHsKICAgICAgICBrZXk6ICcyLjEnLAogICAgICAgIHRpdGxlOiAnTmF2aWdhdGlvbiAzJywKICAgICAgICBjaGlsZHJlbjogWwogICAgICAgICAgewogICAgICAgICAgICBrZXk6ICcyLjEuMScsCiAgICAgICAgICAgIHRpdGxlOiAnT3B0aW9uIDIuMS4xJywKICAgICAgICAgIH0sCiAgICAgICAgXSwKICAgICAgfSwKICAgIF0sCiAgfSwKXTsKZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29tcG9uZW50KHsKICBzZXR1cCgpIHsKICAgIGNvbnN0IGNvbGxhcHNlZCA9IHJlZihmYWxzZSk7CiAgICBjb25zdCB0b2dnbGVDb2xsYXBzZWQgPSAoKSA9PiB7CiAgICAgIGNvbGxhcHNlZC52YWx1ZSA9ICFjb2xsYXBzZWQudmFsdWU7CiAgICB9OwogICAgcmV0dXJuIHsKICAgICAgbGlzdCwKICAgICAgY29sbGFwc2VkLAogICAgICB0b2dnbGVDb2xsYXBzZWQsCiAgICB9OwogIH0sCiAgY29tcG9uZW50czogewogICAgJ3N1Yi1tZW51JzogU3ViTWVudSwKICAgIE1lbnVGb2xkT3V0bGluZWQsCiAgICBNZW51VW5mb2xkT3V0bGluZWQsCiAgICBQaWVDaGFydE91dGxpbmVkLAogIH0sCn0pOwo8L3NjcmlwdD4="}},{default:s(()=>[n("div",Sn,[e(c,{type:"primary",onClick:o.toggleCollapsed,style:{"margin-bottom":"16px"}},{default:s(()=>[o.collapsed?(d(),W(m,{key:0})):(d(),W(l,{key:1}))]),_:1},8,["onClick"]),e(A,{"default-selected-keys":["1"],"default-open-keys":["2"],mode:"inline",theme:"dark","inline-collapsed":o.collapsed},{default:s(()=>[(d(!0),X(O,null,U(o.list,k=>(d(),X(O,{key:k.key},[k.children?(d(),W(r,{"menu-info":k,key:k.key},null,8,["menu-info"])):(d(),W(u,{key:k.key},{icon:s(()=>[e(C)]),default:s(()=>[t(" "+H(k.title),1)]),_:2},1024))],64))),128))]),_:1},8,["inline-collapsed"])])]),htmlCode:s(()=>a[0]||(a[0]=[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 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"},'"')]),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"},'"')])]),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"},":default-selected-keys"),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"},'"')]),t(` `),n("span",{class:"token attr-name"},":default-open-keys"),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"},'"')]),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"},":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 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 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 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 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"},"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 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[1]||(a[1]=[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 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"},'"')]),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"},'"')])]),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"},":default-selected-keys"),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"},'"')]),t(` `),n("span",{class:"token attr-name"},":default-open-keys"),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"},'"')]),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"},":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 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 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 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"},"["),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.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"},","),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 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 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 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"},"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 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})}var Pn=Z(Vn,[["render",wn]]);const Xn=v({CN:J,US:nn,components:{Horizontal:sn,InlineCollapsed:cn,Inline:kn,SiderCurrent:dn,SwitchMode:Cn,Theme:Wn,Vertical:Gn,TemplateSingleFile:Pn}});function Rn(o,a,i,g,I,G){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"),k=p("demo-sort");return d(),W(k,{cols:1},{default:s(()=>[e(m),e(l),e(c),e(C),e(u),e(r),e(A),e(b)]),_:1})}var Ln=Z(Xn,[["render",Rn]]);export{Ln as default};