Avatar
一个支持回退和 Nuxt Image 的 img 元素。
用法
当安装了 @nuxt/image 时，Avatar 组件会使用 <NuxtImg> 组件，否则回退到 img。
你可以传入 HTML
<img> 元素的任何属性，例如 alt、loading 等。Src
使用 src 属性设置图像 URL。
<template>
<UAvatar src="https://github.com/benjamincanac.png" />
</template>
Size
使用 size 属性设置 Avatar 的大小。
<template>
<UAvatar src="https://github.com/benjamincanac.png" size="xl" />
</template>
<img> 元素的 width 和 height 会根据 size 属性自动设置。Icon
使用 icon 属性来显示回退的 Icon。
<template>
<UAvatar icon="i-lucide-image" size="md" />
</template>
Text
使用 text 属性来显示回退文本。
<template>
<UAvatar text="+1" size="md" />
</template>
Alt
当未提供 icon 或 text 时，alt 属性的 首字母 将用作回退。
<template>
<UAvatar alt="Benjamin Canac" size="md" />
</template>
alt 属性会作为 alt 属性传递给 img 元素。示例
带 Tooltip
你可以使用 Tooltip 组件在悬停 Avatar 时显示 tooltip。
<template>
<UTooltip text="Benjamin Canac">
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UTooltip>
</template>
带 Chip
你可以使用 Chip 组件在 Avatar 周围显示 chip。
<template>
<UChip inset>
<UAvatar
src="https://github.com/benjamincanac.png"
alt="Benjamin Canac"
/>
</UChip>
</template>
API
属性
| 属性 | 默认值 | 类型 |
|---|---|---|
as |
|
此组件应渲染为的元素或组件。 |
src |
| |
alt |
| |
icon |
| |
text |
| |
size |
|
|
ui |
|
主题
app.config.ts
export default defineAppConfig({
ui: {
avatar: {
slots: {
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-medium leading-none text-muted truncate',
icon: 'text-muted shrink-0'
},
variants: {
size: {
'3xs': {
root: 'size-4 text-[8px]'
},
'2xs': {
root: 'size-5 text-[10px]'
},
xs: {
root: 'size-6 text-xs'
},
sm: {
root: 'size-7 text-sm'
},
md: {
root: 'size-8 text-base'
},
lg: {
root: 'size-9 text-lg'
},
xl: {
root: 'size-10 text-xl'
},
'2xl': {
root: 'size-11 text-[22px]'
},
'3xl': {
root: 'size-12 text-2xl'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
avatar: {
slots: {
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-medium leading-none text-muted truncate',
icon: 'text-muted shrink-0'
},
variants: {
size: {
'3xs': {
root: 'size-4 text-[8px]'
},
'2xs': {
root: 'size-5 text-[10px]'
},
xs: {
root: 'size-6 text-xs'
},
sm: {
root: 'size-7 text-sm'
},
md: {
root: 'size-8 text-base'
},
lg: {
root: 'size-9 text-lg'
},
xl: {
root: 'size-10 text-xl'
},
'2xl': {
root: 'size-11 text-[22px]'
},
'3xl': {
root: 'size-12 text-2xl'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
ui: {
avatar: {
slots: {
root: 'inline-flex items-center justify-center shrink-0 select-none overflow-hidden rounded-full align-middle bg-elevated',
image: 'h-full w-full rounded-[inherit] object-cover',
fallback: 'font-medium leading-none text-muted truncate',
icon: 'text-muted shrink-0'
},
variants: {
size: {
'3xs': {
root: 'size-4 text-[8px]'
},
'2xs': {
root: 'size-5 text-[10px]'
},
xs: {
root: 'size-6 text-xs'
},
sm: {
root: 'size-7 text-sm'
},
md: {
root: 'size-8 text-base'
},
lg: {
root: 'size-9 text-lg'
},
xl: {
root: 'size-10 text-xl'
},
'2xl': {
root: 'size-11 text-[22px]'
},
'3xl': {
root: 'size-12 text-2xl'
}
}
},
defaultVariants: {
size: 'md'
}
}
}
})
]
})