feat: 添加路由元信息支持，优化无限加载组件的状态管理和错误处理

src/components/UseIntersectionObserverInfiniteLoading.vue

@@ -1,4 +1,5 @@
 <script lang="ts">
+/* https://github.com/youzan/vant/blob/be93d4990fd671338b5d1066cf8419519d668d65/packages/vant/src/list/List.tsx */
 function checkIsVisible(el: Element, root: Element | null = null) {
   if (!el) return false;
 
@@ -26,66 +27,57 @@ function checkIsVisible(el: Element, root: Element | null = null) {
  * ```
  *
  * ```vue
- * <UseIntersectionObserverInfiniteLoading :async-load="loadData" ref="infiniteLoading" />
+ * <UseIntersectionObserverInfiniteLoading />
  * ```
  */
 
 const props = defineProps<{
-  asyncLoad: (page: number) => Promise<{ hasMore: boolean }>;
+  loading: boolean;
+  complete: boolean;
+  error: boolean;
+  errorText: string;
 }>();
+
 defineSlots<{
   // 加载中
   loading(): unknown;
   // 加载完成（还有更多）
-  loadMore(props: { load: () => void }): unknown;
+  loaded(): unknown;
   // 加载完成（没有更多了）
   complete(): unknown;
   // 加载失败
-  error(props: { retry: () => void }): unknown;
+  error(): unknown;
 }>();
-defineExpose({
-  refresh: () => {
-    currentPage = 0;
-    state.value = '';
-    return load('refresh');
-  },
-});
 
-const target = ref(null);
-let currentPage = 0;
-const state = ref<'' | 'loading' | 'loaded' | 'complete' | 'error'>('');
-
-const load = async (why?: string) => {
-  console.group('load');
-  console.debug(`why :>> `, why);
-  console.groupEnd();
-  if (state.value === 'loading') return;
-
-  state.value = 'loading';
-  try {
-    const { hasMore } = await props.asyncLoad(++currentPage);
-    state.value = hasMore ? 'loaded' : 'complete';
-    if (hasMore && checkIsVisible(target.value!)) {
-      await nextTick();
-      await new Promise((resolve) => setTimeout(resolve, 300));
-      load('visible after load');
+const check = (reason?: string) => {
+  nextTick(() => {
+    if (
+      props.loading ||
+      props.complete ||
+      // props.disabled ||
+      props.error
+    ) {
+      return;
     }
-
-    if (!hasMore) {
-      pause();
+    if (checkIsVisible(target.value!)) {
+      emit('load');
     }
-  } catch (error) {
-    console.error(`error :>> `, error);
-    currentPage--;
-    state.value = 'error';
-  }
+  });
 };
 
-const { pause, resume /*  ,isSupported, isActive */ } = useIntersectionObserver(
+const emit = defineEmits<{
+  load: [];
+  clickError: [];
+}>();
+
+const target = ref(null);
+
+const { pause, resume } = useIntersectionObserver(
   target,
   ([entry]) => {
     if (entry?.isIntersecting) {
-      load('visible in observer');
+      if (props.loading) return;
+      check('isIntersecting');
     }
   },
   {
@@ -99,51 +91,47 @@ const { pause, resume /*  ,isSupported, isActive */ } = useIntersectionObserver(
     threshold: 0,
   },
 );
-onMounted(() => {
-  resume();
+watchEffect(() => {
+  if (props.complete) {
+    pause();
+  } else {
+    resume();
+  }
 });
+
+watch(
+  () => [props.loading, props.complete, props.error],
+  () => check('watch'),
+);
 </script>
 
 <template>
   <div class="infinite-loading" ref="target">
-    <div v-if="state === 'complete'" class="infinite-loading__complete">
+    <div v-if="complete" class="infinite-loading__complete">
       <slot name="complete">
         <span>没有更多了</span>
       </slot>
     </div>
     <template v-else>
-      <div v-show="state == 'loading'" class="infinite-loading__loading">
-        <slot name="loading">
-          <span> 加载中... </span>
-        </slot>
-      </div>
-      <!-- 如果 isSupported，loaded 状态应该永远不会出现 -->
-      <div
-        v-show="state === 'loaded' || state === ''"
-        class="infinite-loading__loaded"
-        @click="
-          () => {
-            !$slots.loadMore && load('click loadMore');
-          }
-        "
-      >
-        <slot name="loadMore" :load>
-          <span> 点击加载更多 </span>
-        </slot>
-      </div>
-      <div
-        v-if="state === 'error'"
-        class="infinite-loading__error"
-        @click="
-          () => {
-            !$slots.error && load('click error');
-          }
-        "
-      >
-        <slot name="error" :retry="load">
-          <span> 加载失败，点击重试 </span>
-        </slot>
-      </div>
+      <template v-if="error">
+        <div class="infinite-loading__error" @click="emit('clickError')">
+          <slot name="error">
+            <span> {{ props.errorText || '加载失败，点击重试' }} </span>
+          </slot>
+        </div>
+      </template>
+      <template v-else>
+        <div v-show="loading" class="infinite-loading__loading">
+          <slot name="loading">
+            <span> 加载中... </span>
+          </slot>
+        </div>
+        <div v-show="!loading" class="infinite-loading__loaded" @click="check('click loaded')">
+          <slot name="loaded">
+            <span> 加载更多 </span>
+          </slot>
+        </div>
+      </template>
     </template>
   </div>
 </template>
@@ -156,7 +144,7 @@ onMounted(() => {
   display: flex;
   justify-content: center;
   align-items: center;
-  min-height: 40px;
+  min-height: 3rem;
   color: #666;
 }
 .infinite-loading__loaded,