u

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+// 包裹模式：spinning 为 true 时给内容加半透明遮罩 + 居中指示器
+import { ref } from 'vue'
+import { G3Button, G3Spin, G3Space } from '@g3soft/ui'
+
+const loading = ref(false)
+
+async function reload() {
+  loading.value = true
+  await new Promise((resolve) => setTimeout(resolve, 1200))
+  loading.value = false
+}
+</script>
+
+<template>
+  <G3Space direction="vertical" :size="12" style="display: flex">
+    <G3Button type="outline" size="small" @click="reload">重新加载</G3Button>
+
+    <G3Spin :spinning="loading">
+      <div style="padding: 24px; border: 1px solid #d9d9d9; border-radius: 8px">
+        被包裹的内容区域：加载中会被遮罩覆盖，并阻止点击。
+      </div>
+    </G3Spin>
+  </G3Space>
+</template>