59c864fef3
All checks were successful
git提交控制 AiDA WEB-Node.js main 分支构建部署 / build (20.19.0) (push) Has been skipped
70 lines
1.6 KiB
Vue
70 lines
1.6 KiB
Vue
<script setup lang="ts">
|
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
|
const props = defineProps({
|
|
loading: { default: false, type: Boolean },
|
|
finish: { default: false, type: Boolean },
|
|
empty: { default: false, type: Boolean },
|
|
pel: { default: () => {}, type: Function }
|
|
})
|
|
const emit = defineEmits(['load'])
|
|
const el = ref()
|
|
const placeholder = ref()
|
|
const observer = ref()
|
|
onMounted(() => {
|
|
observer.value = new IntersectionObserver(
|
|
(entries, observer) => {
|
|
if (!entries[0].intersectionRatio || props.loading || props.finish) return
|
|
emit('load')
|
|
},
|
|
{ root: props.pel() || el.value }
|
|
).observe(placeholder.value)
|
|
})
|
|
onBeforeUnmount(() => {
|
|
observer.value?.disconnect()
|
|
})
|
|
</script>
|
|
<template>
|
|
<div class="my-list" ref="el" :class="{ empty: !loading && empty }">
|
|
<slot></slot>
|
|
<div class="footer">
|
|
<p v-show="!loading" class="placeholder" ref="placeholder"></p>
|
|
<span class="loading" v-if="loading">Loading...</span>
|
|
<span class="empty" v-else-if="empty">Nothing Here</span>
|
|
<span class="nomore" v-else-if="finish">No more</span>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style lang="less" scoped>
|
|
.my-list {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
> .footer {
|
|
width: 100%;
|
|
font-size: 3rem;
|
|
color: #a1a1a1;
|
|
text-align: center;
|
|
margin: var(--my-list-footer-margin, 0);
|
|
> .placeholder {
|
|
height: 1px;
|
|
}
|
|
> .empty {
|
|
font-size: 4rem;
|
|
}
|
|
}
|
|
&.empty {
|
|
> .footer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
> .empty {
|
|
margin-bottom: 5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|