v-skeleton 骨架屏指令

简介

为任意元素添加骨架屏效果，常用于数据加载时的占位展示。基于 Element Plus 的 ElSkeleton 实现，支持自定义动画、图片/文本骨架、宽高、样式等。

基本用法

<template>
  <div v-skeleton="{ loading: isLoading }">内容</div>
</template>

<script setup>
import { ref } from 'vue'
const isLoading = ref(true)
</script>

参数说明

v-skeleton 支持对象参数，常用属性如下：

参数	说明	类型	默认值
loading	是否显示骨架屏	boolean	true
animated	是否显示动画	boolean	true
throttle	延迟显示骨架屏(ms)	number	0
isImage	是否为图片骨架	boolean	false
width	骨架宽度(px)	number	100%
height	骨架高度(px)	number	100%
style	额外样式	object	-

注意事项

• 该指令会自动为目标元素设置 position: relative（如原本为 static）。
• 骨架屏会自动撑满目标元素区域。
• 支持自定义圆角、padding（自动继承）。

修饰符

无。