使用

要让 Gueleton 正常工作，必须传递以下三个参数：

1. data-key：唯一标识数据源的字符串键
2. data：数据源对象
3. loading：布尔值，指示是否显示骨架屏

此外，Gueleton 会在默认插槽中提供一个名为 data 的作用域变量，代表预存数据或原始的 data。你需要使用这个变量来渲染你的内容，就像这样：

Basic.vue

<template>
  <Gueleton
    :data-key="dataKey"
    :data="data"
    :loading="loading"
    v-slot="{ data }"
  >
    <div class="flex flex-col gap-4 p-4 bg-(--color-red-50)">
      <TweetCard v-for="(item, index) in data" :key="index" v-bind="item" />
    </div>
  </Gueleton>
</template>

当页面首次渲染时，从远程获取的 data 和 data-key 会被存储在 .gueleton/index.json 文件中。

在后续的页面加载中，Gueleton 会优先使用 .gueleton/index.json 中的预存数据来渲染默认插槽内容，然后再根据 DOM 元素生成骨架屏。

在线基础示例

推荐阅读：Gueleton 是如何工作的

可选参数

除了上述三个必需参数外，在安装章节中提到的全局选项也都可以在组件中使用。

下面是一个完整的示例：

Full.vue

<template>
  <Gueleton
    :data="data"
    :data-key="dataKey"
    :loading="loading"
    :limit="limit"
    :fuzzy="fuzzy"
    :type="type"
    :bone="bone"
    :container="container"
    v-slot="{ data }"
  >
    <div class="flex flex-col gap-4 p-4 bg-(--color-red-50)">
      <TweetCard v-for="(item, index) in data" :key="index" v-bind="item" />
    </div>
  </Gueleton>
</template>

在线完整示例