AsUI

Skeleton骨架屏

# 基础用法

<template>
  <div class="t-basic-skeleton-area">
    <as-skeleton />
  </div>
</template>
<script>
export default {
  name: "t-basic-skeleton",
}
</script>
<style>
</style>
Expand Copy

# 更多参数

<template>
  <div class="t-params-skeleton-area">
    <as-skeleton :rows="6" />
  </div>
</template>
<script>
export default {
  name: "t-params-skeleton",
}
</script>
<style>
</style>
Expand Copy

# 动画效果

<template>
  <div class="t-animation-skeleton-area">
    <as-skeleton :rows="6" animated />
  </div>
</template>
<script>
export default {
  name: "t-animation-skeleton",
}
</script>
<style>
</style>
Expand Copy

# 自定义样式

当您想要用自己定义的模板时，可以通过一个具名 Slot 来自己设定模板。

<template>
  <div class="t-custom-content-skeleton-area">
    <as-skeleton style="width: 240px">
      <template slot="template">
        <as-skeleton-item variant="image" style="width: 240px; height: 240px;" />
        <div style="padding: 14px;">
          <as-skeleton-item variant="p" style="width: 50%" />
          <div
              style="display: flex; align-items: center; justify-items: space-between;"
          >
            <as-skeleton-item variant="text" style="margin-right: 16px;" />
            <as-skeleton-item variant="text" style="width: 30%;" />
          </div>
        </div>
      </template>
    </as-skeleton>
  </div>
</template>
<script>
export default {
  name: "t-custom-content-skeleton",
}
</script>
<style>
</style>
Expand Copy

# 渲染多条数据

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

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

点我重新加载

<template>
  <div class="t-multiple-data-skeleton-area">
    <p>
      <as-button @click="setLoading">点我重新加载</as-button>
    </p>
    <as-skeleton :loading="loading" animated :count="3" class="skeleton-area">
      <template slot="template">
        <as-skeleton-item
            class="image-skeleton-item"
            variant="image"
        />
        <div style="padding: 14px;">
          <as-skeleton-item variant="h3" style="width: 50%;" />
          <div
              style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
          >
            <as-skeleton-item variant="text" style="margin-right: 16px;" />
            <as-skeleton-item variant="text" style="width: 30%;" />
          </div>
        </div>
      </template>
      <template>
        <as-card
            :body-style="{ padding: '0px', marginBottom: '1px' }"
            v-for="item in lists"
            :key="item.name"
        >
          <img :src="item.imgUrl" class="image multi-content" />
          <div style="padding: 14px;">
            <span>{{ item.name }}</span>
            <div class="bottom card-header">
              <span class="time">{{ currentDate }}</span>
              <as-button type="text" class="button">操作按钮</as-button>
            </div>
          </div>
        </as-card>
      </template>
    </as-skeleton>
  </div>
</template>
<script>
export default {
  name: "t-multiple-data-skeleton",
  data() {
    return {
      loading: true,
      currentDate: '2021-06-01',
      lists: [],
    }
  },
  mounted() {
    this.loading = false
    this.lists = [
      {
        imgUrl:
            'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
        name: '鹿',
      },
      {
        imgUrl:
            'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
        name: '马',
      },
      {
        imgUrl:
            'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
        name: '山狮',
      },
    ]
  },
  methods: {
    setLoading() {
      this.loading = true
      setTimeout(() => (this.loading = false), 2000)
    },
  },
}
</script>
<style>
.t-multiple-data-skeleton-area{
  width: 400px;
}
.t-multiple-data-skeleton-area .skeleton-area{
  width:400px;
}
.t-multiple-data-skeleton-area .as-card{
  margin-bottom: 20px;
}
.t-multiple-data-skeleton-area .image-skeleton-item{
  width: 400px; 
  height: 267px;
}
@media screen and (max-width: 480px) {
  .t-multiple-data-skeleton-area{
    width: 100%;
  }
  .t-multiple-data-skeleton-area .skeleton-area{
    width: 100%;
  }
  .t-multiple-data-skeleton-area .image-skeleton-item{
    width: 100%;
    height: 267px;
  }
}
</style>
Expand Copy

# Skeleton Attributes

参数 默认值 说明
animated false 是否使用动画,类型为Boolean
count 1 渲染多少个template,建议使用尽可能小的数字,类型为Number
loading true 是否显示skeleton骨架屏,类型为Boolean
rows 4 骨架屏段落数量,类型为Number
throttle 0 延迟占位DOM渲染的时间,单位是毫秒,类型为Number

# Skeleton Item Attributes

参数 默认值 说明
variant text 当前显示的占位元素的样式,类型为Enum(string),可选值为p/h1/h3/text/caption/button/image/circle/rect

# Skeleton Slots

名称 说明
default 用来展示真实UI
template 用来展示自定义占位符

← Statistic统计数值 →