# t-skeleton

Skeleton 骨架屏

t-skeleton 组件介绍

t-skeleton 用于在页面加载过程中展示占位效果，通过 Canvas 绘制矩形和圆形元素，配合动画效果提升用户体验。支持自定义骨架结构配置和闪烁动画。

t-skeleton 平台兼容

Harmony	H5	Android	iOS	小程序	UTS
✅	✅	✅	✅	✅	✅

t-skeleton 基础用法

基础用法参考 demo/skeleton/skeleton.uvue，通过 option 属性配置骨架结构，支持矩形和圆形两种元素类型。

<template>
	<view>
		<tui-theme-switch></tui-theme-switch>
		<t-card class='mlrt-15' title="Skeleton"
			sub-title="canvas绘制,首屏加载更快,采用JSON数据配置Canvas画布绘制,减少过多DOM渲染影响首屏加载"></t-card>
		<introduction title="基础功能">
			<t-skeleton :option="option" class="h-135 p-10 r-10"></t-skeleton>
		</introduction>
		<introduction title="显示头像占位">
			<t-skeleton :option="option1" class="h-135 p-10 r-10"></t-skeleton>
		</introduction>
		<introduction title="显示头像占位">
			<t-skeleton :option="option2" class="h-135 p-10 r-10"></t-skeleton>
		</introduction>
		<introduction title="关闭动画">
			<t-skeleton :animate="false" :option="option1" class="h-135! p-10 r-10"></t-skeleton>
		</introduction>
	</view>
</template>
<script setup>
	const option = [
		{ type: 'rect', x: 2, y: 2, width: 0.9, height: 20 },
		{ type: 'rect', x: 2, y: 32, width: 0.7, height: 20 },
		{ type: 'rect', x: 2, y: 62, width: 0.5, height: 20 },
		{ type: 'rect', x: 2, y: 92, width: 0.3, height: 20 },
	]

	const option1 = [
		{ type: 'circle', x: 18, y: 22, radius: 16 },
		{ type: 'rect', x: 44, y: 6, width: 1, height: 20 },
		{ type: 'rect', x: 44, y: 32, width: 1, height: 20 },
		{ type: 'rect', x: 44, y: 62, width: 1, height: 50 },
	]

	const option2 = [
		{ type: 'rect', x: 2, y: 2, width: 0.1, height: 30 },
		{ type: 'rect', x: 42, y: 2, width: 1, height: 20 },
		{ type: 'rect', x: 42, y: 32, width: 1, height: 20 },
		{ type: 'rect', x: 42, y: 62, width: 1, height: 50 },
	]
</script>

t-skeleton Props

属性名	说明	类型	默认值
path	点击组件后跳转的页面路径；为空时仅响应事件	string	''
hover	是否启用点击效果	boolean	false
type	组件主题类型，可选 info、primary、error、warning、success	string	''
disabled	是否禁用	boolean	false
effect	组件显示主题，可选 normal、dark、light、plain	string	'normal'
size	组件尺寸，可选 large、medium、small、mini	string	'medium'
option	骨架结构配置数组，定义矩形和圆形元素的位置和尺寸	UTSJSONObject[]	[]
animate	是否启用闪烁动画效果	boolean	true

Option 配置项说明

属性名	说明	类型
type	元素类型，rect 矩形 / circle 圆形	string
x	元素 X 坐标（像素）	number
y	元素 Y 坐标（像素）	number
width	矩形宽度，小数表示相对于容器宽度的比例	number
height	矩形高度（像素）	number
radius	圆形半径（像素）	number

t-skeleton Events

事件名	说明	回调参数
transitionend	动画结束时触发	-