mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-04 20:27:44 +08:00
70 lines
1.9 KiB
Vue
70 lines
1.9 KiB
Vue
<template>
|
|
<el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
|
|
<el-radio-button :value="false">expand</el-radio-button>
|
|
<el-radio-button :value="true">collapse</el-radio-button>
|
|
</el-radio-group>
|
|
<el-menu
|
|
default-active="2"
|
|
class="el-menu-vertical-demo"
|
|
:collapse="isCollapse"
|
|
@open="handleOpen"
|
|
@close="handleClose"
|
|
>
|
|
<el-sub-menu index="1">
|
|
<template #title>
|
|
<el-icon><location /></el-icon>
|
|
<span>Navigator One</span>
|
|
</template>
|
|
<el-menu-item-group>
|
|
<template #title><span>Group One</span></template>
|
|
<el-menu-item index="1-1">item one</el-menu-item>
|
|
<el-menu-item index="1-2">item two</el-menu-item>
|
|
</el-menu-item-group>
|
|
<el-menu-item-group title="Group Two">
|
|
<el-menu-item index="1-3">item three</el-menu-item>
|
|
</el-menu-item-group>
|
|
<el-sub-menu index="1-4">
|
|
<template #title><span>item four</span></template>
|
|
<el-menu-item index="1-4-1">item one</el-menu-item>
|
|
</el-sub-menu>
|
|
</el-sub-menu>
|
|
<el-menu-item index="2">
|
|
<el-icon><icon-menu /></el-icon>
|
|
<template #title>Navigator Two</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="3" disabled>
|
|
<el-icon><document /></el-icon>
|
|
<template #title>Navigator Three</template>
|
|
</el-menu-item>
|
|
<el-menu-item index="4">
|
|
<el-icon><setting /></el-icon>
|
|
<template #title>Navigator Four</template>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref } from 'vue'
|
|
import {
|
|
Document,
|
|
Menu as IconMenu,
|
|
Location,
|
|
Setting,
|
|
} from '@element-plus/icons-vue'
|
|
|
|
const isCollapse = ref(true)
|
|
const handleOpen = (key: string, keyPath: string[]) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
const handleClose = (key: string, keyPath: string[]) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.el-menu-vertical-demo:not(.el-menu--collapse) {
|
|
width: 200px;
|
|
min-height: 400px;
|
|
}
|
|
</style>
|