73 lines
1.6 KiB
Vue
73 lines
1.6 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-if="item.show !== false" v-bind="item.attrs" @click="handleMenuClick(item)">
|
|
{{ item.title }}
|
|
<div v-if="item.children" :key="index">
|
|
<a-menu class="multi-level-menu-sub-menu">
|
|
<template v-for="child in item.children">
|
|
<a-menu-item
|
|
v-if="child.show !== false"
|
|
:key="child.key"
|
|
v-bind="child.attrs"
|
|
@click="handleSubMenuClick($event, item, child)"
|
|
>
|
|
{{ child.title }}
|
|
</a-menu-item>
|
|
</template>
|
|
</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(event, item, child) {
|
|
event.domEvent.stopPropagation()
|
|
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>
|