优化
This commit is contained in:
@@ -2,7 +2,7 @@
|
|||||||
<div class="vs-area-wrapper">
|
<div class="vs-area-wrapper">
|
||||||
<div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle">
|
<div class="vs-area select-none" :class="{ 'is-maximized': isMaximized }" :style="areaStyle">
|
||||||
<!-- 顶部标题栏 -->
|
<!-- 顶部标题栏 -->
|
||||||
<div class="vs-title-bar">
|
<div v-if="showTitleBar" class="vs-title-bar">
|
||||||
<div class="vs-title-left">
|
<div class="vs-title-left">
|
||||||
<div class="vs-app-icon" aria-label="AppIcon">
|
<div class="vs-app-icon" aria-label="AppIcon">
|
||||||
<svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true">
|
<svg class="vs-icon" viewBox="0 0 22.4 22.4" aria-hidden="true">
|
||||||
@@ -67,7 +67,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { defineProps, computed, defineEmits } from 'vue'
|
import { defineProps, computed, defineEmits, ref } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
id: { type: String, required: true },
|
id: { type: String, required: true },
|
||||||
@@ -77,11 +77,16 @@ const props = defineProps({
|
|||||||
WindowState: { type: String, default: '正常' },
|
WindowState: { type: String, default: '正常' },
|
||||||
// 新增:默认尺寸
|
// 新增:默认尺寸
|
||||||
width: { type: Number, default: 300 },
|
width: { type: Number, default: 300 },
|
||||||
height: { type: Number, default: 250 }
|
height: { type: Number, default: 250 },
|
||||||
|
// 新增:控制标题栏显示
|
||||||
|
showTitleBar: { type: Boolean, default: true }
|
||||||
})
|
})
|
||||||
|
|
||||||
// 根据初始状态计算是否最大化
|
// 本地状态:不再向父组件发事件,内部维护最大化/还原
|
||||||
const isMaximized = computed(() => props.WindowState === '最大化' || props.WindowState === 'maximized')
|
const localState = ref(props.WindowState)
|
||||||
|
|
||||||
|
// 根据本地状态计算是否最大化
|
||||||
|
const isMaximized = computed(() => localState.value === '最大化' || localState.value === 'maximized')
|
||||||
|
|
||||||
// 新增:根据状态计算尺寸样式
|
// 新增:根据状态计算尺寸样式
|
||||||
const areaStyle = computed(() => {
|
const areaStyle = computed(() => {
|
||||||
@@ -91,11 +96,12 @@ const areaStyle = computed(() => {
|
|||||||
return { width: `${props.width}px`, height: `${props.height}px` }
|
return { width: `${props.width}px`, height: `${props.height}px` }
|
||||||
})
|
})
|
||||||
|
|
||||||
const emit = defineEmits(['update:WindowState', 'close'])
|
const emit = defineEmits(['close'])
|
||||||
|
|
||||||
const onToggleMaximize = () => {
|
const onToggleMaximize = () => {
|
||||||
const next = isMaximized.value ? '正常' : '最大化'
|
const next = isMaximized.value ? '正常' : '最大化'
|
||||||
emit('update:WindowState', next)
|
// 直接更新本地状态,不再 emit 到父组件
|
||||||
|
localState.value = next
|
||||||
}
|
}
|
||||||
|
|
||||||
const onClose = () => emit('close')
|
const onClose = () => emit('close')
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<Area :WindowState="windowState" @update:WindowState="handleUpdate" />
|
<Area :WindowState="windowState" :showTitleBar="false" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|||||||
Reference in New Issue
Block a user