65 lines
1.3 KiB
Vue
65 lines
1.3 KiB
Vue
|
<template>
|
||
|
|
<a-menu mode="vertical" :style="{ width }" class="multi-level-menu">
|
||
|
|
<template v-for="(item, index) in children">
|
||
|
|
<a-menu-item :key="index" v-bind="item.attrs" @click="handleMenuClick(item)">
|
||
|
|
{{ item.title }}
|
||
|
|
<div v-if="item.children" :key="index">
|
||
|
|
<a-menu class="multi-level-menu-sub-menu">
|
||
|
|
<a-menu-item v-for="child in item.children" :key="child.key" @click="handleSubMenuClick(item, child)">
|
||
|
|
{{ child.title }}
|
||
|
|
</a-menu-item>
|
||
|
|
</a-menu>
|
||
|
|
</div>
|
||
|
|
</a-menu-item>
|
||
|
|
</template>
|
||
|
|
</a-menu>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
children: {
|
||
|
|
type: Array,
|
||
|
|
default: () => []
|
||
|
|
},
|
||
|
|
width: {
|
||
|
|
type: String,
|
||
|
|
default: 'auto'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleMenuClick(item) {
|
||
|
|
if (!item.children) {
|
||
|
|
this.$emit('menuClick', item)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
handleSubMenuClick(item, child) {
|
||
|
|
this.$emit('submenuClick', { item, child })
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.multi-level-menu {
|
||
|
|
.ant-menu-item {
|
||
|
|
overflow: visible;
|
||
|
|
|
||
|
|
.multi-level-menu-sub-menu {
|
||
|
|
position: absolute;
|
||
|
|
top: 0;
|
||
|
|
right: 0;
|
||
|
|
transform: translateX(100%);
|
||
|
|
display: none;
|
||
|
|
background: #03353f;
|
||
|
|
}
|
||
|
|
|
||
|
|
&-active {
|
||
|
|
.multi-level-menu-sub-menu {
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|