u

code/g3soft-libs/docs/examples/select/load-more.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+// 触底加载：列表滚到底部触发 loadMore，footer 插槽放加载提示
+import { onMounted, ref } from 'vue'
+import { G3Select } from '@g3soft/ui'
+
+const value = ref<number | undefined>(undefined)
+const loading = ref(false)
+const options = ref<Array<{ label: string; value: number }>>([])
+const page = ref(0)
+
+function loadPage() {
+  if (loading.value) return
+  loading.value = true
+  setTimeout(() => {
+    page.value += 1
+    const start = (page.value - 1) * 20
+    options.value.push(
+      ...Array.from({ length: 20 }, (_, index) => ({
+        label: `选项 ${start + index + 1}`,
+        value: start + index + 1,
+      })),
+    )
+    loading.value = false
+  }, 400)
+}
+
+// 首次加载放在 onMounted，避免 SSR 阶段访问浏览器 API
+onMounted(loadPage)
+</script>
+
+<template>
+  <div style="width: 240px">
+    <G3Select
+      v-model="value"
+      :options="options"
+      :loading="loading"
+      placeholder="滚动到底部加载更多"
+      @load-more="loadPage"
+    >
+      <template #footer="{ loading: isLoading }">
+        <div style="padding: 6px; color: #6b7280; font-size: 12px; text-align: center">
+          {{ isLoading ? '加载中…' : `已加载 ${options.length} 条` }}
+        </div>
+      </template>
+    </G3Select>
+  </div>
+</template>