u

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

@@ -1,36 +1,55 @@
 <script setup lang="ts">
 // delay：请求很快时根本不显示，避免「闪一下」；慢请求才出现
 import { ref } from 'vue'
-import { G3Button, G3Spin, G3Space } from '@g3soft/ui'
+import { G3Button, G3Segmented, G3Space, G3Spin } from '@g3soft/ui'
 
 const fastLoading = ref(false)
 const slowLoading = ref(false)
 
-async function run(duration: number, target: typeof fastLoading) {
-  target.value = true
-  await new Promise((resolve) => setTimeout(resolve, duration))
-  target.value = false
+// 可调的 delay 时长，直观对比「延迟多久后才出现」
+const delay = ref(300)
+const delayOptions = [
+  { label: '0ms', value: 0 },
+  { label: '300ms', value: 300 },
+  { label: '800ms', value: 800 },
+]
+
+// 注意：模板里 @click="run(200, fastLoading)" 会把 ref 自动解包成布尔值，
+// 因此这里不接收 ref 对象，而是接收「设置加载态」的回调，避免在布尔值上写 .value 报错。
+function run(duration: number, setLoading: (v: boolean) => void) {
+  setLoading(true)
+  setTimeout(() => setLoading(false), duration)
 }
 </script>
 
 <template>
   <G3Space vertical :size="16" style="display: flex">
-    <G3Space :size="8">
-      <G3Button size="small" type="outline" @click="run(200, fastLoading)">200ms 请求</G3Button>
-      <G3Button size="small" type="outline" @click="run(1500, slowLoading)">1500ms 请求</G3Button>
+    <G3Space :size="8" align="center">
+      <span class="label">delay</span>
+      <G3Segmented v-model="delay" :options="delayOptions" />
     </G3Space>
 
-    <G3Spin :spinning="fastLoading" :delay="400">
-      <div class="box">内容区域</div>
+    <G3Space :size="8">
+      <G3Button size="small" type="outline" @click="run(200, (v) => (fastLoading = v))">200ms 请求</G3Button>
+      <G3Button size="small" type="outline" @click="run(1500, (v) => (slowLoading = v))">1500ms 请求</G3Button>
+    </G3Space>
+
+    <G3Spin :spinning="fastLoading" :delay="delay">
+      <div class="box">200ms 请求（短于 delay 时不显示加载态）</div>
     </G3Spin>
 
-    <G3Spin :spinning="slowLoading" :delay="400">
-      <div class="box">内容区域</div>
+    <G3Spin :spinning="slowLoading" :delay="delay">
+      <div class="box">1500ms 请求（超过 delay 后显示加载态）</div>
     </G3Spin>
   </G3Space>
 </template>
 
 <style scoped>
+.label {
+  font-size: 13px;
+  color: #666;
+}
+
 .box {
   padding: 20px;
   border: 1px solid #d9d9d9;