直接使用骨架屏组件来显示占位符。
<template>
<div class="flex items-center gap-4">
<USkeleton class="h-12 w-12 rounded-full" />
<div class="grid gap-2">
<USkeleton class="h-4 w-[250px]" />
<USkeleton class="h-4 w-[200px]" />
</div>
</div>
</template>
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
| 插槽 | 类型 |
|---|---|
default |
|
export default defineAppConfig({
ui: {
skeleton: {
base: 'animate-pulse rounded-md bg-elevated'
}
}
})
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
skeleton: {
base: 'animate-pulse rounded-md bg-elevated'
}
}
})
]
})