# @brayamvalero/vue3-skeleton 中文文档

规范地址：https://npmcn.com/package/%40brayamvalero/vue3-skeleton/

版本：2\.0\.0
npm 元数据更新时间：2025-06-24T16:19:55.294Z
中文译文更新时间：2026-11-08T14:18:54.128Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40brayamvalero/vue3-skeleton
原文对照：https://npmcn.com/package/%40brayamvalero/vue3-skeleton/?lang=original
项目主页：https://github.com/BrayamValero/vue3-skeleton#readme
源码仓库：https://github.com/BrayamValero/vue3-skeleton

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：21.6 kB，11 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- peer 依赖：vue ^3\.0\.0
- 首次发布：2024-03-21T18:25:49.718Z
- 最新版本发布：2025-06-24T16:19:55.123Z
- 近 30 天下载量：3436（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：35（近 12 个月 0 个）

## 中文简介

与 Vue 3 兼容的优雅骨架库

## 安装

```sh
npm install @brayamvalero/vue3-skeleton
```

也可以使用：`pnpm add @brayamvalero/vue3-skeleton`、`yarn add @brayamvalero/vue3-skeleton`、`bun add @brayamvalero/vue3-skeleton`

## README

# : skull: Vue3-斯凯勒通

构建并制作惊人的加载体验, 自动适应您的 Vue 应用程序 .

#### [打开 Stackblintz 演示](https://stackblitz.com/edit/vue3-skeleton?file=src%2FApp.vue)

![Skeleton GIF](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExcXdjMnM1OWNrYmQyeTZteTQxOTJrcXVkMWpjbW4xcGNwYXNxanVyZSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/GrHJfT7omWaebHkJ6b/giphy.gif)

此寄存器来自 [反应-加载-斯凯莱通](https://github.com/dvtng/react-loading-skeleton)

## : 火箭: 安装

通过 [国家预防机制](https://www.npmjs.com/package/@brayamvalero/vue3-skeleton)

```bash
npm i @brayamvalero/vue3-skeleton
```

### : memo: 基本用途

在全球安装插件 .

```tsx
import { createApp } from 'vue'
import App from './App.vue'
// Import the component library & Stylesheet
import Skeleton from '@brayamvalero/vue3-skeleton'
import '@brayamvalero/vue3-skeleton/dist/style.css'

createApp(App)
    // Install the Skeleton Plugin
    .use(Skeleton)
    .mount('#app')
```

或者,在本地安装插件, 无论是 `<script>` 或者说 `<script setup>`

```html
<script>
    import { Skeleton } from '@brayamvalero/vue3-skeleton'
    import '@brayamvalero/vue3-skeleton/dist/style.css'

    export default {
        components: { Skeleton },
    }
</script>
```

```html
<script setup>
    import { Skeleton } from '@brayamvalero/vue3-skeleton'
    import '@brayamvalero/vue3-skeleton/dist/style.css'
</script>
```

现在,你准备好了

```html
<template>
    <div class="Home">
        <h1>
            <!--Skeleton will inherit <h1> height -->
            <Skeleton />
        </h1>
        <p>
            <!--Skeleton will inherit <p> height -->
            <Skeleton :rows="3" />
        </p>
    </div>
</template>
```

### : sparkles: 特性

以无缝方式适应您定义的样式 `<Skeleton />` 模块无缝地集成到您的组件中, 装入时填入空隙。 不像其他框架那样, 设计出一个骨架屏幕是细心的任务 匹配字体大小、行高和边距,我们的 Skeleton 组件不费力地适应正确的尺寸.

例如:

```html
<template>
    <div class="Home">
        <h1>
            <Skeleton>{{ data.title }}</Skeleton>
        </h1>
        <p>
            <Skeleton :rows="3">{{ data.description }}</Skeleton>
        </p>
    </div>
</template>
```

这个代码片段可以确保生成 精确比例化的骨架 `<h1>` 财务报告和审定财务报表 `<p>` 要素 不需要额外的配置。 此外,它还主持一个无缝的过渡,等待内容 在隐藏Skeleton和优雅地揭开所装内容之前.

#### 手动加载

使用 `loading` 手动控制骨架装载状态的道具.

```html
<template>
    <div class="Home">
        <h1>
            <Skeleton :loading="loading">{{ data.title }}</Skeleton>
        </h1>
        <p>
            <Skeleton :loading="loading" :rows="3">{{ data.description }}</Skeleton>
        </p>
    </div>
</template>
```

### :警告:避免创建专用骨架屏幕

相反,配备了综合骨架状态的工艺部件.

**这种方法具有若干优点:**

-   **统一样式 :** 确保样式的一致性.
-   **全面代表性:** 部件应包含所有可想象的状态,包括装载.
-   **增强加载灵活性 :** 启用更适应性的加载序列 .

### :艺术:

自定义带有道具的单个骨架, 或制成 Skeleton 其下所有骨架样式的主题.

```html
<script setup>
    import { Skeleton, SkeletonTheme } from '@brayamvalero/vue3-skeleton'
    import '@brayamvalero/vue3-skeleton/dist/style.css'
</script>

<template>
    <div class="Home">
        <!-- This applies Base Color and Highligh Color to all Skeletons -->
        <SkeletonTheme base-color="#303030" highlight-color="#606060">
            <h1>
                <Skeleton>{{ data.title }}</Skeleton>
            </h1>
            <p>
                <Skeleton :rows="3">{{ data.description }}</Skeleton>
            </p>
        </SkeletonTheme>
    </div>
</template>
```

> 内部声明道具 `<Skeleton />` 将优先处理 `<SkeletonTheme />` 道具来.

### : page facing up: 主张宣言

低声点,你可以看看每个道具.

### `<Skeleton>`

| 名称 | 类型 | 说明 | 默认 |
| --- | --- | --- | --- |
| 行数 | `number` | 设定行的组件量 | `1` |
| 圆 | `boolean` | 设定组件 `border-radius` 以50%取代边框Radius道具 | `false` |
| 容器分类 | `string` | 设定组件类别为骨架容器 | `null` |
| 子类 | `string` | 设定每个骨架子的组件类 | `null` |
| 装入 | `boolean` | 设定组件加载状态 | `undefined` |

### `<Skeleton>` `<SkeletonTheme>`

| 名称 | 类型 | 说明 | 默认 |
| --- | --- | --- | --- |
| 宽度 | `string` `number` | 设定组件 `width`,可以是数字 `px` 或带有相应 css 值的字符串 | `100%` |
| 高度 | `string` `number` | 设定组件 `height`,可以是数字 `px` 或带有相应 css 值的字符串 | `inherit` |
| 边框拉迪乌斯 | `string` `number` | 设定组件 `border-radius`,可以是数字 `px` 或带有相应 css 值的字符串 | `0.25rem` |
| 颜色 | `string` | 设定组件 `background-color` | `#ebebeb` |
| 突出显示颜色 | `string` | 设定组件 `background-image` 突出显示颜色动画 | `#ebebeb` |
| 动画期限 | `number` | 设定组件 `animation-duration` 以秒计 | `#f5f5f5` |
| 动画 方向 | `normal` `reverse` | 设定组件动画方向 `normal` (从左到右)或 `reverse` (右边) | `normal` |
| 启用动画 | `boolean` | 设定组件动画状态 `running` 或者说 `paused` | `true` |
| 内入 | `boolean` | 设定组件内置行为 | `false` |
| 自定义高亮背景 | `string` | 覆盖 `background-image` 属性,使您能够完全自定义梯度. | `undefined` |

#### 自定义突出显示背景

您可能想要将亮点元素中使用的梯度缩小或扩大 。 要做到这一点,你可以设置 自定义高亮背景道具。 以下是一个狭义突出的例子:

```html
<Skeleton custom-highlight-background="linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%)">
    Loading...
</Skeleton>
```

如果使用这个道具,则基色和突出色色道具被忽略了,但您仍然可以参考它们 相应的 CSS 变量,如上例所示.

### 解决问题

骨架宽度为 0, 当父有 `display: flex` 在下面的例子中,骨架的宽度将是0:

```html
<div :style="{ display: 'flex' }">
    <Skeleton :style="{ flex: 1 }" />
</div>
```

这是因为骨架没有内在的宽度. 你可以通过应用来修正它 `flex: 1` 至骨架上 容器,也可以通过 `containerClass` 道具 (英语).

## 常见问题

### @brayamvalero/vue3-skeleton 是什么？

与 Vue 3 兼容的优雅骨架库

### 如何安装 @brayamvalero/vue3-skeleton？

在项目目录运行 npm install @brayamvalero/vue3-skeleton，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：vue（^3\.0\.0）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @brayamvalero/vue3-skeleton 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @brayamvalero/vue3-skeleton 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @brayamvalero/vue3-skeleton 可以商用吗？

@brayamvalero/vue3-skeleton 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @brayamvalero/vue3-skeleton 的下载量有多少？

根据 npm 官方下载统计，@brayamvalero/vue3-skeleton 在 2026/10/09 – 2026/11/07 这 30 天内被下载 3,436 次，日均约 115 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @brayamvalero/vue3-skeleton 还在维护吗？

最新版本 2\.0\.0 发布于 2025/06/25（1\.4 年前）；至今共发布 35 个版本，其中过去 12 个月发布了 0 个；首次发布于 2024/03/22。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。