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