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>

code/g3soft-libs/docs/examples/modal/footer-slot.vue

@@ -8,25 +8,18 @@ const open = ref(false)
 
 <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="发布向导">
       <template #header-extra>
         <G3Button size="small" type="ghost">帮助</G3Button>
       </template>
 
-      <p style="margin: 0">底部可以放多个按钮、步骤指示器或协议勾选。</p>
-
       <template #footer>
-        <div style="display: flex; align-items: center; justify-content: space-between; width: 100%">
-          <span style="font-size: 12px; color: #6b7280">第 1 / 3 步</span>
-          <G3Space :size="8">
-            <G3Button type="outline" @click="open = false">取消</G3Button>
-            <G3Button @click="open = false">下一步</G3Button>
-          </G3Space>
-        </div>
+        <G3Space :size="8">
+          <G3Button type="outline" @click="open = false">取消</G3Button>
+          <G3Button @click="open = false">下一步</G3Button>
+        </G3Space>
       </template>
     </G3Modal>
   </G3Space>

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

@@ -19,9 +19,7 @@ const showFooter = ref(true)
       <G3Switch v-model="showFooter">显示底部按钮</G3Switch>
     </G3Space>
 
-    <div>
-      <G3Button @click="open = true">打开</G3Button>
-    </div>
+    <G3Button @click="open = true">打开</G3Button>
 
     <G3Modal
       v-model:open="open"
@@ -30,8 +28,6 @@ const showFooter = ref(true)
       :keyboard="keyboard"
       :closable="closable"
       :footer="showFooter"
-    >
-      强制用户做出选择时，把 maskClosable / keyboard / closable 都设为 false。
-    </G3Modal>
+    />
   </G3Space>
 </template>

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

@@ -14,16 +14,11 @@ const fullscreen = ref(false)
 
     <G3Modal
       v-model:open="open"
-      :title="fullscreen ? '居中且禁止拖动' : '拖动标题栏可移动，拖拽四边可缩放'"
+      title="对话框"
       :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>