fix: mp/menu菜单拖动后激活菜单

(cherry picked from commit 917b9d180a)
This commit is contained in:
dhb52 2023-04-22 20:45:03 +08:00 committed by shizhong
parent 67f6db22c2
commit ac7202ec61

View File

@ -4,7 +4,7 @@
item-key="id"
ghost-class="draggable-ghost"
:animation="400"
@end="onDragEnd"
@end="onParentDragEnd"
>
<template #item="{ element: parent, index: x }">
<div class="menu_bottom">
@ -23,6 +23,7 @@
item-key="id"
ghost-class="draggable-ghost"
:animation="400"
@end="onChildDragEnd"
>
<template #item="{ element: child, index: y }">
<div class="subtitle menu_bottom">
@ -118,42 +119,49 @@ const subMenuClicked = (child: Menu, x: number, y: number) => {
}
/**
* 处理一级菜单展开后被拖动
* 处理一级菜单展开后被拖动激活(展开)原来活动的一级菜单
*
* @param oldIndex: 一级菜单拖动前的位置
* @param newIndex: 一级菜单拖动后的位置
*/
const onDragEnd = ({ oldIndex, newIndex }) => {
const onParentDragEnd = ({ oldIndex, newIndex }) => {
//
if (props.activeIndex === '__MENU_NOT_SELECTED__') {
return
}
let newParent = props.parentIndex
if (props.parentIndex === oldIndex) {
newParent = newIndex
} else if (props.parentIndex === newIndex) {
newParent = oldIndex
} else {
// `props.parentIndex`
// 使`newParent`
// 使`newParent`
let positions = new Array<boolean>(menuList.value.length).fill(false)
positions[props.parentIndex] = true
positions.splice(oldIndex, 1)
positions.splice(newIndex, 0, true)
newParent = positions.indexOf(true)
}
const [out] = positions.splice(oldIndex, 1) // out
positions.splice(newIndex, 0, out) // out
const newParentIndex = positions.indexOf(true)
//
const parent = menuList.value[newParent]
emit('menu-clicked', parent, newParent)
const parent = menuList.value[newParentIndex]
emit('menu-clicked', parent, newParentIndex)
}
/**
* 处理二级菜单展开后被拖动激活被拖动的菜单
*
* @param newIndex 二级菜单拖动后的位置
*/
const onChildDragEnd = ({ newIndex }) => {
const x = props.parentIndex
const y = newIndex
const children = menuList.value[x]?.children
if (children && children?.length > 0) {
const child = children[y]
emit('submenu-clicked', child, x, y)
}
}
</script>
<style lang="scss" scoped>
.menu_bottom {
position: relative;
display: inline-block;
display: block;
float: left;
width: 85.5px;
text-align: center;