test/element-plus
1
0
Fork 0
mirror of https://gitee.com/element-plus/element-plus.git synced 2024-12-02 19:28:14 +08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

docs(components): [avatar] (#10709)

Browse Source 
* docs(components): [avatar]

* Update avatar documentation per new design.
* Move AvatarInstance to instance.ts for better readabilties.

* chore: remove backquote

* chore: update keywords to all-lowercase

* chore: refinement

Co-authored-by: JeremyWuuuuu <15975785+JeremyWuuuuu@users.noreply.github.com>
This commit is contained in:
Jeremy 2022-11-24 22:56:01 +08:00 committed by GitHub
parent a389b80e3e
commit ecb4b0117e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 44 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/en-US/component/avatar.md
View File

@ -47,28 +47,28 @@ avatar/fit
::: :::
## Avatar API ## API
### Avatar Attributes ### Attributes
| Name | Description | Type | Default | Required | | Name | Description | Type | Default |
| --------- | --------------------------------------------------------- | ---------------------------------------------------------- | ----------- | -------- | | ------- | --------------------------------------------------------- | ----------------------------------------------------------------- | ------- |
| `icon` | representation type to icon, more info on icon component. | `string \| Component` | — | No | | icon | representation type to icon, more info on icon component. | ^[string] / ^[Component] | — |
| `size` | avatar size. | `number \| 'large' \| 'default' \| 'small'` | `'default'` | No | | size | avatar size. | ^[number] / ^[enum]`'large' \| 'default' \| 'small'` | default |
| `shape` | avatar shape. | `'circle' \| 'square'` | `'circle'` | No | | shape | avatar shape. | ^[enum]`'circle' \| 'square'` | circle |
| `src` | the source of the image for an image avatar. | `string` | — | No | | src | the source of the image for an image avatar. | `string` | — |
| `src-set` | native attribute `srcset` of image avatar. | `string` | — | No | | src-set | native attribute `srcset` of image avatar. | `string` | — |
| `alt` | native attribute `alt` of image avatar. | `string` | — | No | | alt | native attribute `alt` of image avatar. | `string` | — |
| `fit` | set how the image fit its container for an image avatar. | `'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | `'cover'` | No | | fit | set how the image fit its container for an image avatar. | ^[enum]`'fill' \| 'contain' \| 'cover' \| 'none' \| 'scale-down'` | cover |
### Avatar Events ### Events
| Name | Description | Type | | Name | Description | Type |
| ------- | ------------------------------ | -------------------- | | ----- | ------------------------------ | ------------------------------- |
| `error` | trigger when image load error. | `(e: Event) => void` | | error | trigger when image load error. | ^[Function]`(e: Event) => void` |
### Avatar Slots ### Slots
| Name | Description | | Name | Description |
| --------- | ------------------------- | | ------- | ------------------------- |
| `default` | customize avatar content. | | default | customize avatar content. |

1
packages/components/avatar/index.ts
View File

@ -5,3 +5,4 @@ export const ElAvatar = withInstall(Avatar)
export default ElAvatar export default ElAvatar
export * from './src/avatar' export * from './src/avatar'
export type { AvatarInstance } from './src/instance'

24
packages/components/avatar/src/avatar.ts
View File

@ -7,29 +7,49 @@ import {
import { componentSizes } from '@element-plus/constants' import { componentSizes } from '@element-plus/constants'
import type { ExtractPropTypes } from 'vue' import type { ExtractPropTypes } from 'vue'
import type { ObjectFitProperty } from 'csstype' import type { ObjectFitProperty } from 'csstype'
import type Avatar from './avatar.vue'
export const avatarProps = buildProps({ export const avatarProps = buildProps({
/**
* @description avatar size.
*/
size: { size: {
type: [Number, String], type: [Number, String],
values: componentSizes, values: componentSizes,
default: '', default: '',
validator: (val: unknown): val is number => isNumber(val), validator: (val: unknown): val is number => isNumber(val),
}, },
/**
* @description avatar shape.
*/
shape: { shape: {
type: String, type: String,
values: ['circle', 'square'], values: ['circle', 'square'],
default: 'circle', default: 'circle',
}, },
/**
* @description representation type to icon, more info on icon component.
*/
icon: { icon: {
type: iconPropType, type: iconPropType,
}, },
/**
* @description the source of the image for an image avatar.
*/
src: { src: {
type: String, type: String,
default: '', default: '',
}, },
/**
* @description native attribute `alt` of image avatar.
*/
alt: String, alt: String,
/**
* @description native attribute srcset of image avatar.
*/
srcSet: String, srcSet: String,
/**
* @description set how the image fit its container for an image avatar.
*/
fit: { fit: {
type: definePropType<ObjectFitProperty>(String), type: definePropType<ObjectFitProperty>(String),
default: 'cover', default: 'cover',
@ -41,5 +61,3 @@ export const avatarEmits = {
error: (evt: Event) => evt instanceof Event, error: (evt: Event) => evt instanceof Event,
} }
export type AvatarEmits = typeof avatarEmits export type AvatarEmits = typeof avatarEmits
export type AvatarInstance = InstanceType<typeof Avatar>

3
packages/components/avatar/src/instance.ts Normal file
View File

@ -0,0 +1,3 @@
import type Avatar from './avatar.vue'
export type AvatarInstance = InstanceType<typeof Avatar>