Skeleton 骨架屏

平台差异说明

App(vue)	App(nvue)	H5	小程序
√	×	√	√

基本使用

组件由标题，段落和头像组件组成，其中段落需要通过rows参数配置才显示，可以通过title和avatar是否显示标题和头像。 该组件的使用，有几个需要注意的点，如下：

• title(可选)，是否显示标题占位行，该占位行不布满全屏宽度，同时与段落的距离较大以做明显区分
• avatar(可选)，是否在左上角位置显示圆形的头像占位区域
• rows(可选)，段落的行数
• loading(必选)，是否加载中状态，如果为`true```则显示骨架屏组件占位，否则显示插槽中的内容

<m-skeleton loading title rows="3" />

控制加载动画

设置animate为true或false，控制是否显示动画效果。

<m-skeleton loading :animate="false" />

显示头像

<m-skeleton loading avatar rows="1" />

API

Props

参数	说明	类型	默认值	可选值
loading	是否显示骨架占位图，设置为false将会展示slot内容	Boolean	true	false
animate	是否开启动画效果	Boolean	true	false
rows	段落占位图行数	Number | String	0	-
rowsWidth	段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度，不带单位默认px (注意：默认不明确指定，最后一个是70%计算宽度)	String | Array | Number	100%	-
rowsHeight	段落的高度	String | Array | Number	18	-
title	是否展示标题占位图	Boolean	true	false
titleWidth	标题的宽度	Number | String	50%	-
titleHeight	标题的高度	Number | String	18	-
avatar	是否展示头像占位图	Boolean	false	true
avatarSize	头像占位图大小	Number | String	32	-
avatarShape	头像占位图的形状，circle-圆形，square-方形	String	circle	square

Slot

名称	说明
default	loading为false展示内容