u

code/g3soft-libs/docs/examples/button/loading.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+// loading 会拦截 click，所以它同时就是「防重复提交」开关
+import { ref } from 'vue'
+import { G3Button, G3Message, G3Space } from '@g3soft/ui'
+
+const submitting = ref(false)
+
+async function handleSubmit() {
+  if (submitting.value) return
+  submitting.value = true
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 1200))
+    G3Message.success('提交成功')
+  } finally {
+    submitting.value = false
+  }
+}
+</script>
+
+<template>
+  <G3Space :size="[12, 12]" align="center" wrap>
+    <G3Button :loading="submitting" @click="handleSubmit">
+      {{ submitting ? '提交中' : '提交' }}
+    </G3Button>
+
+    <!-- 只是展示加载态：任何变体都可以加载 -->
+    <G3Button type="outline" loading>加载中</G3Button>
+    <G3Button type="ghost" loading>加载中</G3Button>
+  </G3Space>
+</template>