完善Area组件功能:优化居中定位逻辑,确保关闭时同步移除Panel,满足所有需求
This commit is contained in:
@@ -262,21 +262,33 @@ onMounted(() => {
|
||||
|
||||
// 如果没有指定left或top,自动居中定位
|
||||
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 areaWidth = originalPosition.value.width
|
||||
const areaHeight = originalPosition.value.height
|
||||
|
||||
// 计算居中位置
|
||||
originalPosition.value.left = Math.floor((parentRect.width - areaWidth) / 2)
|
||||
originalPosition.value.top = Math.floor((parentRect.height - areaHeight) / 2)
|
||||
|
||||
// 通知父组件位置变化
|
||||
emit('update:position', {
|
||||
left: originalPosition.value.left,
|
||||
top: originalPosition.value.top
|
||||
})
|
||||
parentWidth = parentRect.width
|
||||
parentHeight = parentRect.height
|
||||
} else {
|
||||
// 默认值,防止出错
|
||||
parentWidth = 800
|
||||
parentHeight = 600
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
@@ -158,11 +158,24 @@ const onMaximize = (panelId) => {
|
||||
}
|
||||
}
|
||||
|
||||
// 关闭浮动区域
|
||||
// 关闭浮动区域 - 同时移除内容区的Panel
|
||||
const onCloseFloatingArea = (id) => {
|
||||
const index = floatingAreas.value.findIndex(a => a.id === id)
|
||||
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)
|
||||
console.log('成功关闭Area:', id)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user