Fuzzy Example

This example demonstrates how to control the display effect of skeleton placeholders by adjusting the fuzzy option.

The example shows a component with multi-level nested structure. By setting different fuzzy values, you can observe the differences in blur processing of skeleton placeholders.

Click Reload Data to see the effect

Reload data Reset

Loading

控制是否显示骨架屏

Fuzzy 1

调整生成骨架的粒度

Style

Background Color

Container Background Color

type 为 overlay 时效果明显

Network

Limit

预存数据的裁剪规则

Fetch Delay s

模拟网络延迟时间

Fuzzy.vue

<template>
  <Gueleton
    :data-key="dataKey"
    :data="data"
    :loading="loading"
    :type="type"
    :fuzzy="fuzzy"
    v-slot="{ data }"
  >
    <div class="w-96 mx-auto aspect-video border rounded-lg overflow-hidden">
      <div class="size-full p-6 bg-red-50">
        <div class="size-full p-6 bg-red-100">
          <div class="size-full p-6 bg-red-200">
            <div class="size-full p-6 bg-red-300">
              <div class="size-full flex items-center justify-center">
                <span>Gueleton</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Gueleton>
</template>

<script setup>
import { computed } from 'vue'

import { gueletonOptions } from '../../../store/gueleton-options';
import { useStore } from '@nanostores/vue';

const $gueletonOptions = useStore(gueletonOptions);

const dataKey = computed(() => $gueletonOptions.value.dataKey);
const data = computed(() => $gueletonOptions.value.data);
const loading = computed(() => $gueletonOptions.value.loading);

const type = computed(() => $gueletonOptions.value.type);
const fuzzy = computed(() => $gueletonOptions.value.fuzzy);
</script>

TweetCard.vue

<template>
  <!-- Summary Card (thumbnail) - Tailwind CSS -->
  <div class="p-4 border rounded-lg shadow-sm bg-white not-content">
    <!-- Tweet header -->
    <div class="flex items-start gap-3">
      <div class="h-12 w-12">
        <img class="size-full rounded-full object-cover"
          :src="avatar" alt="avatar">
      </div>
      <div class="flex-1">
        <div class="flex items-center gap-2">
          <span class="font-semibold text-sm">{{ author }}</span>
          <span class="text-gray-500 text-sm">@user · {{ date }}</span>
        </div>
        <p class="mt-2 text-gray-800">
          {{ content }}
        </p>
      </div>
    </div>

    <!-- Tweet actions -->
    <div class="mt-3 flex items-center justify-between text-gray-500 text-sm">
      <div class="flex gap-6">
        <button class="flex items-center gap-2 hover:text-blue-500">💬 <span>{{ comments }}</span></button>
        <button class="flex items-center gap-2 hover:text-green-500">🔁 <span>{{ retweets }}</span></button>
        <button class="flex items-center gap-2 hover:text-red-500">❤️ <span>{{ likes }}</span></button>
      </div>
      <div class="text-xs">Translate</div>
    </div>
  </div>

</template>

<script setup lang="ts">
import type { TweetCard } from '../../../lib/mock-utils';

defineProps<TweetCard>();
</script>