القائمة
Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Element Plus Skills Library - A comprehensive skill library for AI agents to understand and utilize Element Plus UI components. Invoke when user needs to work with Element Plus components, theming, i18n, dark mode, or design specifications.
Affix component for fixing elements to a specific visible area. Invoke when user needs to create sticky navigation, fixed headers, or elements that remain visible while scrolling.
Alert component for displaying important alert messages. Invoke when user needs to show non-dismissible notifications, status messages, or important information that requires user attention.
Anchor component for anchor navigation. Invoke when user needs to create page anchor navigation, table of contents, or quick navigation to specific sections.
Autocomplete component for input suggestions. Invoke when user needs to provide input suggestions, autocomplete functionality, or search-as-you-type features.
Backtop component for back-to-top button. Invoke when user needs to provide quick navigation back to the top of a long page.
| name | el-avatar |
| description | Avatar component for representing people or objects with images, icons, or characters. Invoke when user needs to display user avatars, profile pictures, or entity representations. |
| metadata | {"author":"jiaiyan","version":"1.0.0"} |
Avatar component displays user avatars or entity representations, supporting images, icons, or characters.
<template>
<el-avatar :size="50" :src="avatarUrl" />
<el-avatar shape="square" :size="50" :src="avatarUrl" />
</template>
<script setup>
const avatarUrl = 'https://example.com/avatar.jpg'
</script>
<template>
<el-avatar :icon="UserFilled" />
<el-avatar :src="avatarUrl" />
<el-avatar>user</el-avatar>
</template>
<script setup>
import { UserFilled } from '@element-plus/icons-vue'
</script>
<template>
<el-avatar :src="invalidUrl" @error="errorHandler">
<img src="fallback.jpg" />
</el-avatar>
</template>
<script setup>
const errorHandler = () => true
</script>
<template>
<el-avatar shape="square" :size="100" fit="fill" :src="avatarUrl" />
<el-avatar shape="square" :size="100" fit="contain" :src="avatarUrl" />
<el-avatar shape="square" :size="100" fit="cover" :src="avatarUrl" />
</template>
<template>
<el-avatar-group>
<el-avatar :src="url1" />
<el-avatar :src="url2" />
<el-avatar :src="url3" />
</el-avatar-group>
</template>
| Name | Description | Type | Default |
|---|---|---|---|
| icon | Icon representation | string | Component | — |
| size | Avatar size | number | 'large' | 'default' | 'small' | — |
| shape | Avatar shape | 'circle' | 'square' | — |
| src | Image source | string | — |
| src-set | Native srcset attribute | string | — |
| alt | Native alt attribute | string | — |
| fit | How image fits container | 'fill' | 'contain' | 'cover' | 'none' | 'scale-down' | 'cover' |
| Name | Description | Type |
|---|---|---|
| error | Trigger when image load error | (e: Event) => void |
| Name | Description |
|---|---|
| default | Customize avatar content |
| Name | Description | Type | Default |
|---|---|---|---|
| size | Control size of avatars in group | number | 'large' | 'default' | 'small' | — |
| shape | Control shape of avatars in group | 'circle' | 'square' | — |
| collapse-avatars | Whether to collapse avatars | boolean | false |
| collapse-avatars-tooltip | Show collapsed avatars on hover | boolean | false |
| max-collapse-avatars | Max avatars shown before collapse | number | 1 |
| effect | Tooltip theme | 'dark' | 'light' | 'light' |
| placement | Tooltip placement | Placement enum | 'top' |
fit="cover" for consistent avatar appearance