用于在内容加载过程中展示一组占位图形。
通过以下方式来全局注册组件,更多注册方式请参考组件注册。
import { createApp } from "vue";
import {
Skeleton,
SkeletonTitle,
SkeletonImage,
SkeletonAvatar,
SkeletonParagraph,
} from "vant";
const app = createApp();
app.use(Skeleton);
app.use(SkeletonTitle);
app.use(SkeletonImage);
app.use(SkeletonAvatar);
app.use(SkeletonParagraph);
通过 title
属性显示标题占位图,通过 row
属性配置占位段落行数。
<van-skeleton title :row="3" />
通过 avatar
属性显示头像占位图。
<van-skeleton title avatar :row="3" />
将 loading
属性设置成 false
表示内容加载完成,此时会隐藏占位图,并显示 Skeleton
的子组件。
<van-skeleton title avatar :row="3" :loading="loading">
<div>实际内容</div>
</van-skeleton>
import { ref, onMounted } from "vue";
export default {
setup() {
const loading = ref(true);
onMounted(() => {
loading.value = false;
});
return {
loading,
};
},
};
通过 template
插槽完成自定义内容的展示。
<van-skeleton>
<template #template>
<div :style="{ display: "flex", width: "100%" }">
<van-skeleton-image />
<div :style="{ flex: 1, marginLeft: "16px" }">
<van-skeleton-paragraph row-width="60%" />
<van-skeleton-paragraph />
<van-skeleton-paragraph />
<van-skeleton-paragraph />
</div>
</div>
</template>
</van-skeleton>
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
row | 段落占位图行数 | number | string | 0
|
row-width | 段落占位图宽度,可传数组来设置每一行的宽度 | number | string | (number | string)[] |
100%
|
title | 是否显示标题占位图 | boolean | false
|
avatar | 是否显示头像占位图 | boolean | false
|
loading | 是否显示骨架屏,传 false 时会展示子组件内容 |
boolean | true
|
animate | 是否开启动画 | boolean | true
|
round | 是否将标题和段落显示为圆角风格 | boolean | false
|
title-width | 标题占位图宽度 | number | string | 40%
|
avatar-size | 头像占位图大小 | number | string | 32px
|
avatar-shape | 头像占位图形状,可选值为 square
|
string | round
|
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
round | 是否将段落显示为圆角风格 | boolean | false
|
row-width | 段落占位图宽度 | string | 100%
|
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
round | 是否将标题显示为圆角风格 | boolean | false
|
title-width | 标题占位图宽度 | number | string | 40%
|
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
avatar-size | 头像占位图大小 | number | string | 32px
|
avatar-shape | 头像占位图形状,可选值为 square
|
string | round
|
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
image-size | 图片占位图大小 | number | string | 32px
|
image-shape | 图片占位图形状,可选值为 square
|
string | round
|
名称 | 说明 |
---|---|
default | 骨架屏内容 |
template | 自定义内容 |
组件导出以下类型定义:
import type {
SkeletonProps,
SkeletonImageProps,
SkeletonTitleProps,
SkeletonImageShape,
SkeletonAvatarShape,
SkeletonParagraphProps,
} from "vant";
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
--van-skeleton-paragraph-height | 16px | - |
--van-skeleton-paragraph-background | var(--van-active-color) | - |
--van-skeleton-paragraph-margin-top | var(--van-padding-sm) | - |
--van-skeleton-title-width | 40% | - |
--van-skeleton-avatar-size | 32px | - |
--van-skeleton-avatar-background | var(--van-active-color) | - |
--van-skeleton-duration | 1.2s | - |
--van-skeleton-image-size | 96px | |
--van-skeleton-image-radius | 24px | - |
通过 npm 安装在现有项目中使用 Vant 时,可以通过npm或yarn进行安装:# Vue 2 项目,安装 Vant 2:npm i vant -S# Vue ...
介绍步进器由增加按钮、减少按钮和输入框组成,用于在一定范围内输入、调整数字。实例演示引入通过以下方式来全局注册组件,更多...
介绍虚拟数字键盘,可以配合密码输入框组件或自定义的输入框组件使用。实例演示引入通过以下方式来全局注册组件,更多注册方式请...
介绍Vant 内置了一系列的组合式 API,对于安装了vant的项目,可以直接使用这些 API 进行开发。示例下面是一个 Vant 组合式 API ...
特性提供 60 多个高质量组件,覆盖移动端各类场景性能极佳,组件平均体积不到 1kb(min+gzip)单元测试覆盖率 90%+,提供稳定性...