完善Area组件功能:优化居中定位逻辑,确保关闭时同步移除Panel,满足所有需求
This commit is contained in:
@@ -262,21 +262,33 @@ onMounted(() => {
|
|||||||
|
|
||||||
// 如果没有指定left或top,自动居中定位
|
// 如果没有指定left或top,自动居中定位
|
||||||
if (originalPosition.value.left === undefined || originalPosition.value.top === undefined) {
|
if (originalPosition.value.left === undefined || originalPosition.value.top === undefined) {
|
||||||
if (parentContainer.value && parentContainer.value !== window) {
|
let parentWidth, parentHeight
|
||||||
|
|
||||||
|
if (parentContainer.value === window) {
|
||||||
|
parentWidth = window.innerWidth
|
||||||
|
parentHeight = window.innerHeight
|
||||||
|
} else if (parentContainer.value) {
|
||||||
const parentRect = parentContainer.value.getBoundingClientRect()
|
const parentRect = parentContainer.value.getBoundingClientRect()
|
||||||
const areaWidth = originalPosition.value.width
|
parentWidth = parentRect.width
|
||||||
const areaHeight = originalPosition.value.height
|
parentHeight = parentRect.height
|
||||||
|
} else {
|
||||||
// 计算居中位置
|
// 默认值,防止出错
|
||||||
originalPosition.value.left = Math.floor((parentRect.width - areaWidth) / 2)
|
parentWidth = 800
|
||||||
originalPosition.value.top = Math.floor((parentRect.height - areaHeight) / 2)
|
parentHeight = 600
|
||||||
|
|
||||||
// 通知父组件位置变化
|
|
||||||
emit('update:position', {
|
|
||||||
left: originalPosition.value.left,
|
|
||||||
top: originalPosition.value.top
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const areaWidth = originalPosition.value.width || 300
|
||||||
|
const areaHeight = originalPosition.value.height || 250
|
||||||
|
|
||||||
|
// 计算居中位置
|
||||||
|
originalPosition.value.left = Math.floor((parentWidth - areaWidth) / 2)
|
||||||
|
originalPosition.value.top = Math.floor((parentHeight - areaHeight) / 2)
|
||||||
|
|
||||||
|
// 通知父组件位置变化
|
||||||
|
emit('update:position', {
|
||||||
|
left: originalPosition.value.left,
|
||||||
|
top: originalPosition.value.top
|
||||||
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -158,11 +158,24 @@ const onMaximize = (panelId) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 关闭浮动区域
|
// 关闭浮动区域 - 同时移除内容区的Panel
|
||||||
const onCloseFloatingArea = (id) => {
|
const onCloseFloatingArea = (id) => {
|
||||||
const index = floatingAreas.value.findIndex(a => a.id === id)
|
const index = floatingAreas.value.findIndex(a => a.id === id)
|
||||||
if (index !== -1) {
|
if (index !== -1) {
|
||||||
|
// 获取要移除的Area
|
||||||
|
const areaToRemove = floatingAreas.value[index]
|
||||||
|
|
||||||
|
// 清理Panel引用,确保Panel被正确移除
|
||||||
|
if (areaToRemove.panels) {
|
||||||
|
// 这里可以添加任何需要的Panel清理逻辑
|
||||||
|
console.log('移除Area时同步移除Panel:', areaToRemove.panels.map(p => p.id))
|
||||||
|
// 清空panels数组,确保Panel被正确移除
|
||||||
|
areaToRemove.panels = []
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从数组中移除Area
|
||||||
floatingAreas.value.splice(index, 1)
|
floatingAreas.value.splice(index, 1)
|
||||||
|
console.log('成功关闭Area:', id)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user