41 lines
1.1 KiB
Vue
41 lines
1.1 KiB
Vue
<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>
|