u

code/g3soft-libs/docs/examples/modal/basic.vue

@@ -1,32 +1,22 @@
 <script setup lang="ts">
-// 受控用法：v-model:open 控制显隐，confirm / cancel / closed 三个事件区分关闭来源
+// 受控用法：v-model:open 控制显隐，confirm 事件在点击确定时触发
 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>
+    <G3Button @click="open = true">打开对话框</G3Button>
 
-    <G3Modal v-model:open="open" title="新建项目" @confirm="onConfirm" @cancel="onCancel" @closed="log = `${log}｜closed：退场动画结束`">
+    <G3Modal v-model:open="open" title="新建项目" @confirm="onConfirm">
       <G3Input v-model="name" placeholder="项目名称" />
     </G3Modal>
-
-    <span style="font-size: 12px; color: #6b7280">{{ log }}</span>
   </G3Space>
 </template>