122 lines
2.1 KiB
Vue
122 lines
2.1 KiB
Vue
<docs>
|
|
---
|
|
order: 3
|
|
title:
|
|
zh-CN: 垂直菜单
|
|
en-US: Vertical menu
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
子菜单是弹出的形式。
|
|
|
|
## en-US
|
|
|
|
Submenus open as pop-ups.
|
|
|
|
</docs>
|
|
|
|
<template>
|
|
<a-menu
|
|
v-model:openKeys="openKeys"
|
|
v-model:selectedKeys="selectedKeys"
|
|
style="width: 256px"
|
|
mode="vertical"
|
|
:items="items"
|
|
@click="handleClick"
|
|
/>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { h, ref } from 'vue';
|
|
import {
|
|
MailOutlined,
|
|
CalendarOutlined,
|
|
AppstoreOutlined,
|
|
SettingOutlined,
|
|
} from '@ant-design/icons-vue';
|
|
import type { MenuProps } from 'ant-design-vue';
|
|
|
|
const selectedKeys = ref([]);
|
|
const openKeys = ref([]);
|
|
const items = ref([
|
|
{
|
|
key: '1',
|
|
icon: () => h(MailOutlined),
|
|
label: 'Navigation One',
|
|
title: 'Navigation One',
|
|
},
|
|
{
|
|
key: '2',
|
|
icon: () => h(CalendarOutlined),
|
|
label: 'Navigation Two',
|
|
title: 'Navigation Two',
|
|
},
|
|
{
|
|
key: 'sub1',
|
|
icon: () => h(AppstoreOutlined),
|
|
label: 'Navigation Three',
|
|
title: 'Navigation Three',
|
|
children: [
|
|
{
|
|
key: '3',
|
|
label: 'Option 3',
|
|
title: 'Option 3',
|
|
},
|
|
{
|
|
key: '4',
|
|
label: 'Option 4',
|
|
title: 'Option 4',
|
|
},
|
|
{
|
|
key: 'sub1-2',
|
|
label: 'Submenu',
|
|
title: 'Submenu',
|
|
children: [
|
|
{
|
|
key: '5',
|
|
label: 'Option 5',
|
|
title: 'Option 5',
|
|
},
|
|
{
|
|
key: '6',
|
|
label: 'Option 6',
|
|
title: 'Option 6',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
{
|
|
key: 'sub2',
|
|
icon: () => h(SettingOutlined),
|
|
label: 'Navigation Four',
|
|
title: 'Navigation Four',
|
|
children: [
|
|
{
|
|
key: '7',
|
|
label: 'Option 7',
|
|
title: 'Option 7',
|
|
},
|
|
{
|
|
key: '8',
|
|
label: 'Option 8',
|
|
title: 'Option 8',
|
|
},
|
|
{
|
|
key: '9',
|
|
label: 'Option 9',
|
|
title: 'Option 9',
|
|
},
|
|
{
|
|
key: '10',
|
|
label: 'Option 10',
|
|
title: 'Option 10',
|
|
},
|
|
],
|
|
},
|
|
]);
|
|
const handleClick: MenuProps['onClick'] = menuInfo => {
|
|
console.log('click ', menuInfo);
|
|
};
|
|
</script>
|