mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
117 lines
3.3 KiB
Vue
117 lines
3.3 KiB
Vue
<template>
|
|
<el-row class="tac">
|
|
<el-col :span="12">
|
|
<h5>Default colors</h5>
|
|
<el-menu
|
|
default-active="2"
|
|
class="el-menu-vertical-demo"
|
|
@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 title="Group One">
|
|
<el-menu-item index="1-1">item one</el-menu-item>
|
|
<el-menu-item index="1-2">item one</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>item four</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>
|
|
<span>Navigator Two</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="3" disabled>
|
|
<el-icon><document /></el-icon>
|
|
<span>Navigator Three</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="4">
|
|
<el-icon><setting /></el-icon>
|
|
<span>Navigator Four</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<h5>Custom colors</h5>
|
|
<el-menu
|
|
active-text-color="#ffd04b"
|
|
background-color="#545c64"
|
|
class="el-menu-vertical-demo"
|
|
default-active="2"
|
|
text-color="#fff"
|
|
@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 title="Group One">
|
|
<el-menu-item index="1-1">item one</el-menu-item>
|
|
<el-menu-item index="1-2">item one</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>item four</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>
|
|
<span>Navigator Two</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="3" disabled>
|
|
<el-icon><document /></el-icon>
|
|
<span>Navigator Three</span>
|
|
</el-menu-item>
|
|
<el-menu-item index="4">
|
|
<el-icon><setting /></el-icon>
|
|
<span>Navigator Four</span>
|
|
</el-menu-item>
|
|
</el-menu>
|
|
</el-col>
|
|
</el-row>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
import {
|
|
Location,
|
|
Document,
|
|
Menu as IconMenu,
|
|
Setting,
|
|
} from '@element-plus/icons'
|
|
|
|
export default defineComponent({
|
|
components: {
|
|
Location,
|
|
Document,
|
|
Setting,
|
|
IconMenu,
|
|
},
|
|
setup() {
|
|
const handleOpen = (key, keyPath) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
const handleClose = (key, keyPath) => {
|
|
console.log(key, keyPath)
|
|
}
|
|
return {
|
|
handleOpen,
|
|
handleClose,
|
|
}
|
|
},
|
|
})
|
|
</script>
|