基础的骨架效果。

    更多参数

    可以配置骨架屏段落数量，以便更接近真实渲染效果。首行会被渲染一个长度 33% 的段首。

    Skeleton 骨架屏 - 图2

    动画效果

    ElementPlus 提供的排版模式有时候并不满足要求，当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。

    我们提供了不同的模板单元可供使用，具体可选值请看 API 详细描述。 建议在描述模板的时候，尽量靠近真实的 DOM 结构，这样可以避免 DOM 高度差距引起的抖动。

    Skeleton 骨架屏 - 图4

    1. <template>
    2.   <el-skeleton style="width: 240px">
    3.     <template slot="template">
    4.       <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
    5.       <div style="padding: 14px;">
    6.         <el-skeleton-item variant="p" style="width: 50%" />
    7.         <div
    8.           style="display: flex; align-items: center; justify-items: space-between;"
    9.         >
    10.           <el-skeleton-item variant="text" style="margin-right: 16px;" />
    11.           <el-skeleton-item variant="text" style="width: 30%;" />
    12.         </div>
    13.       </div>
    14.     </template>
    15.   </el-skeleton>
    16. </template>

    Loading 状态

    渲染多条数据

    大多时候, 骨架屏都被用来渲染列表, 当我们需要在从服务器获取数据的时候来渲染一个假的 UI。利用 count 这个属性就能控制渲染多少条假的数据在页面上

    请注意, 请尽可能的将 count 的大小保持在最小状态, 即使是假的 UI, DOM 元素多了之后, 照样会引起性能问题, 并且在骨架屏销毁时所消耗的时间也会更长(相对的)。

    Skeleton 骨架屏 - 图6

    1. <template>
    2.   <div style="width: 400px">
    3.     <p>
    4.       <el-button @click="setLoading">点我重新加载</el-button>
    5.     </p>
    6.     <el-skeleton style="width:400px" :loading="loading" animated :count="3">
    7.       <template slot="template">
    8.           variant="image"
    9.           style="width: 400px; height: 267px;"
    10.         />
    11.         <div style="padding: 14px;">
    12.           <el-skeleton-item variant="h3" style="width: 50%;" />
    14.             style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
    15.           >
    16.             <el-skeleton-item variant="text" style="margin-right: 16px;" />
    17.             <el-skeleton-item variant="text" style="width: 30%;" />
    18.           </div>
    19.         </div>
    20.       </template>
    21.       <template>
    22.         <el-card
    23.           :body-style="{ padding: '0px', marginBottom: '1px' }"
    24.           v-for="item in lists"
    25.           :key="item.name"
    26.         >
    27.           <img :src="item.imgUrl" class="image multi-content" />
    28.           <div style="padding: 14px;">
    29.             <span>{{ item.name }}</span>
    30.             <div class="bottom card-header">
    31.               <span class="time">{{ currentDate }}</span>
    32.               <el-button type="text" class="button">操作按钮</el-button>
    33.             </div>
    34.           </div>
    35.         </el-card>
    36.       </template>
    37.     </el-skeleton>
    38.   </div>
    39. </template>
    41. <script>
    42.     data() {
    43.       return {
    44.         loading: true,
    46.         lists: [],
    47.       }
    48.     },
    49.     mounted() {
    50.       this.loading = false
    51.       this.lists = [
    52.         {
    53.           imgUrl:
    54.             'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
    55.           name: '鹿',
    56.         },
    57.         {
    58.           imgUrl:
    59.             'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
    60.           name: '马',
    61.         },
    62.         {
    63.           imgUrl:
    64.             'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
    65.           name: '山狮',
    66.         },
    67.       ]
    68.     },
    69.     methods: {
    70.       setLoading() {
    71.         this.loading = true
    72.         setTimeout(() => (this.loading = false), 2000)
    73.       },
    74.     },
    75.   }

    Skeleton Attributes

    Skeleton Item Attributes