u

code/g3soft-libs/docs/examples/select/remote.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+// remote：输入时触发 search，选项由父层异步更新；loading 时右侧显示加载图标
+import { ref } from 'vue'
+import { G3Select } from '@g3soft/ui'
+
+const value = ref<string | undefined>(undefined)
+const loading = ref(false)
+const options = ref<Array<{ label: string; value: string }>>([])
+
+let timer = 0
+function onSearch(keyword: string) {
+  window.clearTimeout(timer)
+  loading.value = true
+  // 模拟请求：300ms 后返回结果
+  timer = window.setTimeout(() => {
+    options.value = keyword
+      ? Array.from({ length: 5 }, (_, index) => ({
+          label: `${keyword} 的搜索结果 ${index + 1}`,
+          value: `${keyword}-${index + 1}`,
+        }))
+      : []
+    loading.value = false
+  }, 300)
+}
+</script>
+
+<template>
+  <div style="width: 280px">
+    <G3Select
+      v-model="value"
+      :options="options"
+      :loading="loading"
+      :remote="true"
+      allow-clear
+      not-found-text="输入关键词开始搜索"
+      placeholder="输入后异步搜索"
+      @search="onSearch"
+    />
+  </div>
+</template>