Add support for using submenus in submenus
This commit is contained in:
parent
cf71f89077
commit
56a807f294
|
@ -18,11 +18,9 @@
|
|||
.bd-cm {
|
||||
left: 170px;
|
||||
max-height: 270px;
|
||||
overflow-y: auto;
|
||||
contain: layout;
|
||||
flex: 1;
|
||||
min-height: 1px;
|
||||
margin-left: 170px;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
height: 8px;
|
||||
|
|
|
@ -20,6 +20,9 @@
|
|||
import CMGroup from './contextmenu/Group.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CMGroup
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeMenu: BdContextMenu.activeMenu,
|
||||
|
@ -29,15 +32,14 @@
|
|||
renderLeft: false
|
||||
};
|
||||
},
|
||||
components: { CMGroup },
|
||||
methods: {
|
||||
calculatePosition() {
|
||||
if (!this.activeMenu.menu.groups.length) return {};
|
||||
this.mouseX = this.activeMenu.menu.x;
|
||||
this.mouseY = this.activeMenu.menu.y;
|
||||
const mouseX = this.activeMenu.menu.x;
|
||||
const mouseY = this.activeMenu.menu.y;
|
||||
const height = this.activeMenu.menu.groups.reduce((total, group) => total + group.items.length, 0) * 28;
|
||||
this.top = window.innerHeight - this.mouseY - height < 0 ? this.mouseY - height : this.mouseY;
|
||||
this.left = window.innerWidth - this.mouseX - 170 < 0 ? this.mouseX - 170 : this.mouseX;
|
||||
this.top = window.innerHeight - mouseY - height < 0 ? mouseY - height : mouseY;
|
||||
this.left = window.innerWidth - mouseX - 170 < 0 ? mouseX - 170 : mouseX;
|
||||
this.renderLeft = (this.left + 170 * 2) > window.innerWidth;
|
||||
window.addEventListener('mousedown', this.clickHide);
|
||||
return { top: `${this.top}px`, left: `${this.left}px` };
|
||||
|
|
|
@ -28,13 +28,6 @@
|
|||
|
||||
export default {
|
||||
data() {
|
||||
const subMenu = {
|
||||
type: 'sub',
|
||||
text: 'Sub menu',
|
||||
items: []
|
||||
};
|
||||
subMenu.items.push(subMenu);
|
||||
|
||||
return {
|
||||
loaded: false,
|
||||
updating: false,
|
||||
|
@ -56,8 +49,7 @@
|
|||
if (this.updating === 2) Updater.update();
|
||||
else if (this.updating !== 0) Updater.checkForUpdates();
|
||||
}
|
||||
},
|
||||
subMenu
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
@ -11,14 +11,15 @@
|
|||
<template>
|
||||
<div class="bd-cmGroup">
|
||||
<template v-for="(item, index) in items">
|
||||
<CMToggle v-if="item.type === 'toggle'" :item="item" @click="item.checked = item.onChange(!item.checked)" />
|
||||
<div v-else-if="item.type === 'sub'" class="bd-cmItem bd-cmSub" @mouseenter="subMenuMouseEnter($event, index, item)" @mouseleave="subMenuMouseLeave($event, index, item)">
|
||||
<div v-if="item.type === 'sub'" class="bd-cmItem bd-cmSub" @mouseenter="subMenuMouseEnter($event, index, item)" @mouseleave="subMenuMouseLeave($event, index, item)">
|
||||
{{item.text}}
|
||||
<MiChevronDown />
|
||||
<div class="bd-cm" v-if="index === visibleSub" :style="subStyle">
|
||||
<CMGroup :items="item.items" :top="subTop" :left="left" @close="$emit('close')" />
|
||||
<div v-if="index === visibleSub" :class="['bd-cm', {'bd-cmRenderLeft': subRenderLeft}]" :style="subStyle">
|
||||
<CMGroup :items="item.items" :top="subTop" :left="subLeft" @close="$emit('close')" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CMToggle v-else-if="item.type === 'toggle'" :item="item" @click="item.checked = item.onChange(!item.checked)" />
|
||||
<CMButton v-else :item="item" @click="item.onClick ? item.onClick($event) : undefined; item.type === 'button' ? $emit('close') : undefined" />
|
||||
</template>
|
||||
</div>
|
||||
|
@ -41,7 +42,8 @@
|
|||
visibleSub: -1,
|
||||
subStyle: {},
|
||||
subTop: 0,
|
||||
subLeft: 0
|
||||
subLeft: 0,
|
||||
subRenderLeft: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
@ -50,7 +52,9 @@
|
|||
this.subTop = this.top + subHeight + e.target.offsetTop > window.innerHeight ?
|
||||
this.top - subHeight + e.target.offsetTop + e.target.offsetHeight :
|
||||
this.top + e.target.offsetTop;
|
||||
this.subStyle = { top: `${this.subTop}px`, left: `${this.left}px` };
|
||||
this.subRenderLeft = (this.left + 170 * 2) > window.innerWidth;
|
||||
this.subLeft = this.left + (!this.subRenderLeft ? e.target.clientWidth : 0);
|
||||
this.subStyle = { top: `${this.subTop - 2}px`, left: `${this.subLeft}px` };
|
||||
this.visibleSub = index;
|
||||
},
|
||||
subMenuMouseLeave(e, index, sub) {
|
||||
|
|
Loading…
Reference in New Issue