u

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

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// delay：请求很快时根本不显示，避免「闪一下」；慢请求才出现
+import { ref } from 'vue'
+import { G3Button, G3Spin, G3Space } 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
+}
+</script>
+
+<template>
+  <G3Space direction="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>
+
+    <G3Spin :spinning="fastLoading" :delay="400" description="fast">
+      <div class="box">短请求：因为 delay=400ms，全程不会闪出加载态</div>
+    </G3Spin>
+
+    <G3Spin :spinning="slowLoading" :delay="400" description="slow">
+      <div class="box">长请求：超过 400ms 后才显示加载态</div>
+    </G3Spin>
+  </G3Space>
+</template>
+
+<style scoped>
+.box {
+  padding: 20px;
+  border: 1px solid #d9d9d9;
+  border-radius: 8px;
+  font-size: 13px;
+}
+</style>