30 lines
1.1 KiB
Vue
30 lines
1.1 KiB
Vue
<script setup lang="ts">
|
||
// 拖动标题栏移动、拖拽四边缩放、全屏切换；centered 让面板垂直居中
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Modal, G3Space } from '@g3soft/ui'
|
||
|
||
const open = ref(false)
|
||
const fullscreen = ref(false)
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space :size="12" wrap>
|
||
<G3Button type="outline" @click="open = true; fullscreen = false">可拖动 / 缩放</G3Button>
|
||
<G3Button type="outline" @click="open = true; fullscreen = true">居中显示</G3Button>
|
||
|
||
<G3Modal
|
||
v-model:open="open"
|
||
:title="fullscreen ? '居中且禁止拖动' : '拖动标题栏可移动，拖拽四边可缩放'"
|
||
:width="560"
|
||
:centered="fullscreen"
|
||
:fullscreen="!fullscreen"
|
||
:resizable="!fullscreen"
|
||
>
|
||
<p style="margin: 0">面板默认贴顶显示；开启 centered 后垂直居中，适合确认类与短表单。</p>
|
||
<p style="margin: 8px 0 0; color: #6b7280">
|
||
右上角的全屏按钮与拖动/缩放互斥：全屏时会自动复位位置。
|
||
</p>
|
||
</G3Modal>
|
||
</G3Space>
|
||
</template>
|