u

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

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// #footer 完全自定义底部；#header-extra 放标题右侧的额外动作
+import { ref } from 'vue'
+import { G3Button, G3Modal, G3Space } from '@g3soft/ui'
+
+const open = ref(false)
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <div>
+      <G3Button @click="open = true">自定义底部</G3Button>
+    </div>
+
+    <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>
+      </template>
+    </G3Modal>
+  </G3Space>
+</template>