实现Area组件第9条需求:当内容区只包含一个Panel时,点击Panel的最大化按钮同时最大化Area
This commit is contained in:
@@ -91,8 +91,8 @@
|
|||||||
|
|
||||||
<!-- 内容区域 -->
|
<!-- 内容区域 -->
|
||||||
<div class="vs-content">
|
<div class="vs-content">
|
||||||
<!-- 这里是内容区域,使用slot接收子组件 -->
|
<!-- 这里是内容区域,使用slot接收子组件,并监听Panel的maximize事件 -->
|
||||||
<slot></slot>
|
<slot @maximize="onPanelMaximize"></slot>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -215,6 +215,18 @@ const areaStyle = computed(() => {
|
|||||||
|
|
||||||
const emit = defineEmits(['close', 'update:WindowState', 'update:position'])
|
const emit = defineEmits(['close', 'update:WindowState', 'update:position'])
|
||||||
|
|
||||||
|
// 处理Panel的最大化事件
|
||||||
|
const onPanelMaximize = (panelId) => {
|
||||||
|
// 检查内容区是否只有一个Panel
|
||||||
|
const panelChildren = $slots.default ? $slots.default() : []
|
||||||
|
const isSinglePanel = panelChildren.length === 1
|
||||||
|
|
||||||
|
if (isSinglePanel) {
|
||||||
|
// 如果只有一个Panel,则切换Area的最大化状态
|
||||||
|
onToggleMaximize()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 拖拽开始
|
// 拖拽开始
|
||||||
const onDragStart = (e) => {
|
const onDragStart = (e) => {
|
||||||
// 最大化状态下不允许拖拽
|
// 最大化状态下不允许拖拽
|
||||||
|
|||||||
Reference in New Issue
Block a user