# LazyContainer 延時加載/懶加載組件, 只在組件可見或者延遲一段時間才進行加載 ## Usage ```vue <template> <div class="p-4 lazy-base-demo"> <div class="lazy-base-demo-wrap"> <h1>向下滾動</h1> <LazyContainer @init="() => {}"> <TargetContent /> <template #skeleton> <Skeleton :rows="10" /> </template> </LazyContainer> </div> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Skeleton } from 'ant-design-vue'; import TargetContent from './TargetContent.vue'; import { LazyContainer } from '/@/components/Container/index'; export default defineComponent({ components: { LazyContainer, TargetContent, Skeleton }, }); </script> <style lang="less" scoped> .lazy-base-demo { &-wrap { display: flex; width: 50%; height: 2000px; margin: 20px auto; text-align: center; background: #fff; justify-content: center; flex-direction: column; align-items: center; } h1 { height: 1300px; margin: 20px 0; } } </style> ``` ## Props | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | --- | --- | --- | --- | --- | | timeout | `number` | - | - | 等待時間，如果指定了時間，不論可見與否，在指定時間之后自動加載 | | viewport | `HTMLElement` | - | - | 組件所在的視口，如果組件是在頁面容器內滾動，視口就是該容器 | | threshold | `string` | `0px` | - | 預加載閾值, css 單位 | | direction | `'vertical', 'horizontal'` , `vertical` | - | 視口的滾動方向, vertical 代表垂直方向，horizontal 代表水平方向 | | tag | `string'` | `div` | - | 包裹組件的外層容器的標簽名 | | transitionName | `string'` | lazy-container | - | transition 動畫 name | | maxWaitingTime | `number'` | `80` | - | 最大等待時間 | ## Events | 事件 | 回調參數 | 說明 | | ---- | ---------- | ---------- | | init | `()=>void` | 初始化之后 | ## Slots | 名稱 | 說明 | | -------- | ------------ | | default | 默認區域 | | skeleton | 懶加載骨架屏 |