loading组件封装原理

以vue3为例，采用ts 的语言

首先可对所需数据定义在接口中

interface Prop{ //核心所需的就是   lading:boolean    ,type: 'lading' | 'skeleton'}

进行调用

封装的话采用的是插槽

    <div v-if="loading"  >
     <slot name="template">
        <div v-if="type === 'loading'">
            <VanLoading></VanLoading>
        </div>
        <div v-if="type === 'skeleton'">
            <VanSkeleton :row="10" ></VanSkeleton>
            <VanSkeleton avatar :row="5"></VanSkeleton>
            <!-- <VanSkeleton :row="5"></VanSkeleton> -->
        </div>
     </slot>   
  
    </div>
    <slot v-else></slot>

vant组件需要引用

骨架屏官网查看