u

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

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+// 表单弹窗：confirmLoading 阻止一切关闭，异步提交期间按钮显示加载
+import { reactive, ref } from 'vue'
+import { G3Button, G3Form, G3FormItem, G3Input, G3Message, G3Modal } from '@g3soft/ui'
+
+const open = ref(false)
+const saving = ref(false)
+const model = reactive({ name: '', code: '' })
+const rules = { name: [{ required: true }] }
+
+async function handleConfirm() {
+  saving.value = true
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 1000))
+    G3Message.success(`已保存 ${model.name}`)
+    open.value = false
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <div>
+    <G3Button @click="open = true">新建（表单弹窗）</G3Button>
+
+    <G3Modal
+      v-model:open="open"
+      title="新建项目"
+      :width="480"
+      :confirm-loading="saving"
+      @confirm="handleConfirm"
+    >
+      <G3Form :model="model" :rules="rules" :label-width="72" validate-trigger="blur" @submit="handleConfirm">
+        <G3FormItem name="name" label="名称">
+          <G3Input v-model="model.name" placeholder="必填" />
+        </G3FormItem>
+        <G3FormItem name="code" label="标识">
+          <G3Input v-model="model.code" placeholder="可选" />
+        </G3FormItem>
+      </G3Form>
+    </G3Modal>
+  </div>
+</template>