48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<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 ? '加载中…' : '' }}
|
|
</div>
|
|
</template>
|
|
</G3Select>
|
|
</div>
|
|
</template>
|