: skull: Vue3-斯凯勒通

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

打开 Stackblintz 演示

此寄存器来自 反应-加载-斯凯莱通

: 火箭: 安装

通过 国家预防机制

npm i @brayamvalero/vue3-skeleton

: memo: 基本用途

在全球安装插件 .

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>

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

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

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

现在,你准备好了

<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 组件不费力地适应正确的尺寸.

例如:

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

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

手动加载

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

<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 其下所有骨架样式的主题.

<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>

<Skeleton> <SkeletonTheme>

自定义突出显示背景

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

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

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

解决问题

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

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

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