NaEasy UI

Appearance

Skeleton 骨架屏 ​

介绍 ​

在需要等待加载内容的位置提供的占位组件。

导入 ​

js
import Skeleton from '@/components/display/Skeleton.vue'
import SkeletonAvatar from '@/components/display/skeleton/SkeletonAvatar.vue'
import SkeletonImage from '@/components/display/skeleton/SkeletonImage.vue'
import SkeletonTitle from '@/components/display/skeleton/SkeletonTitle.vue'
import SkeletonParagraph from '@/components/display/skeleton/SkeletonParagraph.vue'
import SkeletonButton from '@/components/display/skeleton/SkeletonButton.vue'

使用方法 ​

基础用法 ​

Skeleton 组件是一个容器组件，通过 loading 属性控制显示占位内容还是实际内容。

vue
<template>
  <FlexRow align="center">
    <Switch v-model="display" />
    <Width :size="20" />
    <Text>显示加载内容</Text>
  </FlexRow>
  <Height :size="20" />
  
  <!-- 头像占位 -->
  <Skeleton :loading="display">
    <template #placeholder>
      <SkeletonAvatar />
    </template>
    <Avatar background="primary" :innerStyle="{ marginBottom: '20rpx' }" text="U" />
  </Skeleton>
  
  <!-- 图片占位 -->
  <Height :size="20" />
  <Skeleton :loading="display">
    <template #placeholder>
      <SkeletonImage :width="200" :height="150" />
    </template>
    <Image
      src="https://imengyu.top/assets/images/test/2.jpg"
      :width="200"
      :height="150"
    />
  </Skeleton>
  
  <!-- 标题占位 -->
  <Height :size="20" />
  <Skeleton :loading="display">
    <template #placeholder>
      <SkeletonTitle :width="240" :innerStyle="{ marginBottom: '10rpx' }" />
    </template>
    <H4>NaEasy UI</H4>
  </Skeleton>
  
  <!-- 段落占位 -->
  <Height :size="20" />
  <Skeleton :loading="display">
    <template #placeholder>
      <SkeletonParagraph :rows="2" :width="480" />
    </template>
    <text :style="{ width: 240 }">精心打磨每一个组件的用户体验，从用户的角度考虑每个组件的使用场景。</text>
  </Skeleton>
  
  <!-- 按钮占位 -->
  <Height :size="20" />
  <Skeleton :loading="display">
    <template #placeholder>
      <SkeletonButton />
    </template>
    <FlexRow>
      <Button>Button</Button>
    </FlexRow>
  </Skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Text from '@/components/basic/Text.vue';
import Switch from '@/components/form/Switch.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import Height from '@/components/layout/space/Height.vue';
import Width from '@/components/layout/space/Width.vue';
import Avatar from '@/components/display/Avatar.vue';
import Image from '@/components/basic/Image.vue';
import H4 from '@/components/typography/H4.vue';
import Button from '@/components/basic/Button.vue';

const display = ref(true);
</script>

加载动画 ​

通过设置 active 属性可以为骨架屏添加动画效果。

vue
<template>
  <FlexRow align="center">
    <Switch v-model="display" />
    <Width :size="20" />
    <Text>显示加载内容</Text>
  </FlexRow>
  <Height :size="20" />
  
  <Skeleton :loading="display" active>
    <template #placeholder>
      <FlexRow :padding="10">
        <SkeletonAvatar :innerStyle="{ marginRight: '24rpx' }" />
        <FlexCol :flex="1">
          <SkeletonTitle :width="240" :innerStyle="{ marginBottom: '24rpx', marginTop: '10rpx' }" />
          <SkeletonParagraph :width="480" :rows="3" />
        </FlexCol>
      </FlexRow>
    </template>
    <FlexRow :padding="10">
      <Avatar background="primary" :innerStyle="{ marginRight: '24rpx' }" text="UI" />
      <FlexCol>
        <H3 :innerStyle="{ marginBottom: '20rpx' }">诗句</H3>

        <text>山有木兮木有枝，心悦君兮君不知。</text>
        <text>人生若只如初见，何事秋风悲画扇。</text>
        <text>大鹏一日同风起，扶摇直上九万里。</text>
      </FlexCol>
    </FlexRow>
  </Skeleton>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import Text from '@/components/basic/Text.vue';
import Switch from '@/components/form/Switch.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import Height from '@/components/layout/space/Height.vue';
import Width from '@/components/layout/space/Width.vue';
import Avatar from '@/components/display/Avatar.vue';
import H3 from '@/components/typography/H3.vue';

const display = ref(true);
</script>

API 参考 ​

Skeleton ​

骨架屏容器组件，用于包裹实际内容和占位内容。

Props ​

名称说明类型必填默认值
loading为 true 时，显示占位元素 placeholder slot。反之则显示内容组件 default slotboolean-false
active是否展示动画效果boolean-false
color占位元素颜色string-'skeleton'

Slots ​

名称说明
default默认插槽，用于显示实际内容
placeholder占位内容插槽，用于显示加载时的占位组件

SkeletonAvatar ​

头像占位组件。

Props ​

名称说明类型必填默认值
shape形状'circle' | 'square'-'circle'
size大小预设'small' | 'medium' | 'large'-'medium'
width宽度number--
height高度number--
innerStyle自定义样式ViewStyle--

SkeletonImage ​

图片占位组件。

Props ​

名称说明类型必填默认值
width宽度number--
height高度number--
innerStyle自定义样式ViewStyle--

SkeletonTitle ​

标题占位组件。

Props ​

名称说明类型必填默认值
size大小预设'small' | 'medium' | 'large'-'medium'
width宽度number--
height高度number--
innerStyle自定义样式ViewStyle--

SkeletonParagraph ​

段落占位组件。

Props ​

名称说明类型必填默认值
rows设置段落占位图的行数number-4
width宽度number--
height高度number--
innerStyle自定义样式ViewStyle--

SkeletonButton ​

按钮占位组件。

Props ​

名称说明类型必填默认值
size大小预设'small' | 'medium' | 'large'-'medium'
width宽度number--
height高度number--
innerStyle自定义样式ViewStyle--

主题变量 ​

名称类型默认值说明
SkeletonColorstring'skeleton'占位元素背景色
SkeletonImageRadiusnumber10图片占位组件圆角大小
SkeletonTitleRadiusnumber10标题占位组件圆角大小
SkeletonTitleSmHeightnumber50小型标题占位组件高度
SkeletonTitleMdHeightnumber70中型标题占位组件高度
SkeletonTitleLgHeightnumber130大型标题占位组件高度
SkeletonParagraphBorderRadiusnumber10段落占位组件圆角大小
SkeletonParagraphWidthstring'100%'段落占位组件宽度
SkeletonParagraphHeightnumber32段落占位组件高度
SkeletonParagraphMarginBottomnumber15段落占位组件底边距
SkeletonParagraphLastBorderRadiusnumber10最后一个段落占位组件圆角大小
SkeletonParagraphLastWidthstring'60%'最后一个段落占位组件宽度
SkeletonParagraphLastHeightnumber32最后一个段落占位组件高度
SkeletonButtonRadiusnumber10按钮占位组件圆角大小
SkeletonButtonWidthnumber155按钮占位组件宽度
SkeletonButtonHeightnumber82按钮占位组件高度
SkeletonAvatarRadiusnumber10方形头像占位组件圆角大小
SkeletonAvatarSmWidthnumber50小型头像占位组件宽度
SkeletonAvatarSmHeightnumber50小型头像占位组件高度
SkeletonAvatarMdWidthnumber80中型头像占位组件宽度
SkeletonAvatarMdHeightnumber80中型头像占位组件高度
SkeletonAvatarLgWidthnumber150大型头像占位组件宽度
SkeletonAvatarLgHeightnumber150大型头像占位组件高度