点击Panel最大化

This commit is contained in:
zqm
2025-11-18 13:48:13 +08:00
parent 324e5e99cb
commit d4f3098af7
3 changed files with 38 additions and 7 deletions

View File

@@ -64,9 +64,21 @@
:title="tabPage.title"
:panels="tabPage.panels"
:tabPosition="'bottom'"
@tab-change="onTabChange"
@tab-close="onTabClose"
@tab-add="onTabAdd"
@tabDragStart="onTabDragStart(area.id, $event)"
@tabDragMove="onTabDragMove(area.id, $event)"
@tabDragEnd="onTabDragEnd"
@toggle-collapse="(panelId) => $emit('toggleCollapse', panelId)"
@maximize="(panelId) => onMaximize(panelId)"
@close="(panelId) => onClosePanel(area.id, panelId)"
@toggle-toolbar="(panelId) => $emit('toggleToolbar', panelId)"
@drag-start="(event) => $emit('dragStart', event)"
@drag-move="(event) => $emit('dragMove', event)"
@drag-end="(event) => $emit('dragEnd', event)"
@dragover="handleAreaDragOver"
@dragleave="handleAreaDragLeave"
>
<!-- 在TabPage内渲染其包含的Panels -->
<Panel
@@ -79,7 +91,7 @@
:maximized="panel.maximized"
:content="panel.content"
@toggleCollapse="onToggleCollapse"
@maximize="onMaximize"
@maximize="(panelId) => $emit('maximize', panelId)"
@close="onClosePanel(area.id, panel.id)"
@toggleToolbar="onToggleToolbar"
@dragStart="onPanelDragStart(area.id, $event)"
@@ -94,12 +106,22 @@
</template>
<script setup>
import { ref, defineExpose, nextTick, watch, computed, onMounted } from 'vue'
import { ref, defineExpose, defineEmits, nextTick, watch, computed, onMounted } from 'vue'
import Area from './Area.vue';
import Panel from './Panel.vue';
import TabPage from './TabPage.vue';
import DockIndicator from './DockIndicator.vue';
// 定义组件可以发出的事件
const emit = defineEmits([
'maximize', // 面板最大化事件
'toggleCollapse', // 折叠状态切换事件
'toggleToolbar', // 工具栏切换事件
'dragStart', // 拖拽开始事件
'dragMove', // 拖拽移动事件
'dragEnd' // 拖拽结束事件
])
// 主区域状态
const windowState = ref('最大化')