feat: 添加prettier格式化代码

src/components/miaoLazyDiv.vue

@@ -1,41 +1,53 @@
 <!-- 只适合用于渲染过程较为复杂的组件，不然可能得不偿失
      这么泛用的组件，性能差点也能理解 -->
 <template>
-    <div class="miao-lazy" ref="miaoLazyRoot"
-        :style="!show ? { minHeight: _autoHeight !== undefined ? _autoHeight : props.minHeight, minWidth, margin } : {}">
-        <slot v-if="show" />
-    </div>
+   <div
+      class="miao-lazy"
+      ref="miaoLazyRoot"
+      :style="
+         !show
+            ? {
+                 minHeight:
+                    _autoHeight !== undefined ? _autoHeight : props.minHeight,
+                 minWidth,
+                 margin
+              }
+            : {}
+      "
+   >
+      <slot v-if="show" />
+   </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue'
 
 const props = defineProps({
-    // disable: {
-    //     type: Boolean,
-    //     default: false,
-    // },
-    disableLazy: {
-        type: Boolean,
-        default: false,
-    },
-    // 仅在内容未加载时生效，用于占位
-    minHeight: {
-        type: String,
-        default: 'none',
-    },
-    minWidth: {
-        type: String,
-        default: 'none',
-    },
-    margin: {
-        type: String,
-        default: 'none',
-    },
-    autoHeight: {
-        type: Boolean,
-        default: false
-    }
+   // disable: {
+   //     type: Boolean,
+   //     default: false,
+   // },
+   disableLazy: {
+      type: Boolean,
+      default: false
+   },
+   // 仅在内容未加载时生效，用于占位
+   minHeight: {
+      type: String,
+      default: 'none'
+   },
+   minWidth: {
+      type: String,
+      default: 'none'
+   },
+   margin: {
+      type: String,
+      default: 'none'
+   },
+   autoHeight: {
+      type: Boolean,
+      default: false
+   }
 })
 
 const miaoLazyRoot = ref<HTMLDivElement>()
@@ -45,74 +57,77 @@ const _autoHeight = ref<string>()
 const show = ref<boolean>(props.disableLazy)
 
 const isVisible = (dom: HTMLDivElement) => {
-    const offset = dom.getBoundingClientRect().top
-    return offset > 0 && offset < 2000
+   const offset = dom.getBoundingClientRect().top
+   return offset > 0 && offset < 2000
 }
 
 const { showSlot, hideSlot, clearTimer } = (() => {
-    let timer: any
-    let timerInterval: any
-    const clearTimer = () => {
-        timer && clearTimeout(timer)
-        timerInterval && clearInterval(timerInterval)
-        timer = undefined
-        timerInterval = undefined
-    }
-    const hideSlot = () => {
-        clearTimer()
-        if (props.autoHeight) {
-            _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
-        }
-        show.value = false
-    }
-    const showSlot = () => {
-        if (show.value === true) {
+   let timer: any
+   let timerInterval: any
+   const clearTimer = () => {
+      timer && clearTimeout(timer)
+      timerInterval && clearInterval(timerInterval)
+      timer = undefined
+      timerInterval = undefined
+   }
+   const hideSlot = () => {
+      clearTimer()
+      if (props.autoHeight) {
+         _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
+      }
+      show.value = false
+   }
+   const showSlot = () => {
+      if (show.value === true) {
+         return
+      }
+      clearTimer()
+      // timer = setTimeout(() => {
+      if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
+         return
+      }
+      show.value = true
+      timerInterval = setInterval(() => {
+         if (show.value === false || miaoLazyRoot.value === undefined) {
             return
-        }
-        clearTimer()
-        // timer = setTimeout(() => {
-        if (!miaoLazyRoot.value || isVisible(miaoLazyRoot.value) === false) {
-            return
-        }
-        show.value = true
-        timerInterval = setInterval(() => {
-            if (show.value === false || miaoLazyRoot.value === undefined) {
-                return
-            }
-            if (isVisible(miaoLazyRoot.value) === false) {
-                hideSlot()
-            }
-        }, 1000)
-        // if (props.autoHeight) {
-        //     nextTick(() => {
-        //         console.log(miaoLazyRoot.value?.clientHeight)
-        //         _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
-        //     })
-        // }
-    }
-    return { showSlot, hideSlot, clearTimer }
+         }
+         if (isVisible(miaoLazyRoot.value) === false) {
+            hideSlot()
+         }
+      }, 1000)
+      // if (props.autoHeight) {
+      //     nextTick(() => {
+      //         console.log(miaoLazyRoot.value?.clientHeight)
+      //         _autoHeight.value = `${miaoLazyRoot.value?.clientHeight}px`
+      //     })
+      // }
+   }
+   return { showSlot, hideSlot, clearTimer }
 })()
 
 onMounted(() => {
-    if (show.value === false) {
-        let options = {
-            threshold: 0
-        };
+   if (show.value === false) {
+      let options = {
+         threshold: 0
+      }
 
-        let observer: IntersectionObserver | undefined = new IntersectionObserver((entries) => {
+      let observer: IntersectionObserver | undefined = new IntersectionObserver(
+         (entries) => {
             if (entries[0].isIntersecting) {
-                showSlot()
-                // miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
-                // observer = undefined
+               showSlot()
+               // miaoLazyRoot.value && observer?.unobserve(miaoLazyRoot.value)
+               // observer = undefined
             } else {
-                hideSlot()
+               hideSlot()
             }
-        }, options);
-        miaoLazyRoot.value && observer.observe(miaoLazyRoot.value);
-    }
+         },
+         options
+      )
+      miaoLazyRoot.value && observer.observe(miaoLazyRoot.value)
+   }
 })
 
 onBeforeUnmount(() => {
-    clearTimer()
+   clearTimer()
 })
-</script>
+</script>