33 lines
988 B
Vue
33 lines
988 B
Vue
<script setup lang="ts">
|
||
// 受控用法：v-model:open 控制显隐，confirm / cancel / closed 三个事件区分关闭来源
|
||
import { ref } from 'vue'
|
||
import { G3Button, G3Input, G3Modal, G3Space } from '@g3soft/ui'
|
||
|
||
const open = ref(false)
|
||
const name = ref('')
|
||
const log = ref('暂无')
|
||
|
||
function onConfirm() {
|
||
log.value = `confirm：提交 ${name.value || '（空）'}`
|
||
open.value = false
|
||
}
|
||
|
||
function onCancel() {
|
||
log.value = 'cancel：取消按钮 / 遮罩 / Esc / 右上角关闭'
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<G3Space direction="vertical" :size="12" style="display: flex">
|
||
<div>
|
||
<G3Button @click="open = true">打开对话框</G3Button>
|
||
</div>
|
||
|
||
<G3Modal v-model:open="open" title="新建项目" @confirm="onConfirm" @cancel="onCancel" @closed="log = `${log}｜closed：退场动画结束`">
|
||
<G3Input v-model="name" placeholder="项目名称" />
|
||
</G3Modal>
|
||
|
||
<span style="font-size: 12px; color: #6b7280">{{ log }}</span>
|
||
</G3Space>
|
||
</template>
|