Skip to content

Commit 31b9b5e

Browse files
gd4Arkgd4Ark
authored
feat: 增强 avatar (#76)
1 parent 2071324 commit 31b9b5e

File tree

5 files changed

+499
-100
lines changed

5 files changed

+499
-100
lines changed

‎examples/docs/en-US/avatar.md

Lines changed: 143 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -7,103 +7,204 @@ Avatars can be used to represent people or objects. It supports images, Icons, o
77
use `shape` and `size` prop to set avatar's shape and size
88

99
:::demo
10+
1011
```html
1112
<template>
1213
<el-row class="demo-avatar demo-basic">
1314
<el-col :span="12">
1415
<div class="sub-title">circle</div>
1516
<div class="demo-basic--circle">
16-
<div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div>
17+
<div class="block">
18+
<el-avatar :size="50" :src="circleUrl"></el-avatar>
19+
</div>
1720
<div class="block" v-for="size in sizeList" :key="size">
1821
<el-avatar :size="size" :src="circleUrl"></el-avatar>
1922
</div>
2023
</div>
21-
</el-col>
24+
</el-col>
2225
<el-col :span="12">
2326
<div class="sub-title">square</div>
2427
<div class="demo-basic--circle">
25-
<div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div>
28+
<div class="block">
29+
<el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
30+
</div>
2631
<div class="block" v-for="size in sizeList" :key="size">
2732
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
2833
</div>
2934
</div>
30-
</el-col>
35+
</el-col>
3136
</el-row>
3237
</template>
3338
<script>
3439
export default {
35-
data () {
40+
data() {
3641
return {
37-
circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
38-
squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",
39-
sizeList: ["large", "medium", "small"]
42+
circleUrl:
43+
'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
44+
squareUrl:
45+
'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
46+
sizeList: ['large', 'medium', 'small'],
4047
}
41-
}
48+
},
4249
}
4350
</script>
44-
4551
```
52+
4653
:::
4754

4855
### Types
4956

5057
It supports images, Icons, or characters
5158

5259
:::demo
60+
5361
```html
5462
<template>
5563
<div class="demo-type">
5664
<div>
5765
<el-avatar icon="el-icon-user-solid"></el-avatar>
5866
</div>
5967
<div>
60-
<el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
68+
<el-avatar
69+
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
70+
></el-avatar>
6171
</div>
6272
<div>
6373
<el-avatar> user </el-avatar>
6474
</div>
6575
</div>
6676
</template>
6777
```
78+
79+
:::
80+
81+
### Tooltip
82+
83+
If `text` or `tooltip` exist, The tooltips can be displayed when the mouse hovers
84+
85+
:::demo
86+
87+
```html
88+
<template>
89+
<div class="demo-type">
90+
<div>
91+
<el-avatar
92+
tooltip="This is a custom tooltip content"
93+
icon="el-icon-user-solid"
94+
></el-avatar>
95+
</div>
96+
<div>
97+
<el-avatar
98+
text="element"
99+
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
100+
></el-avatar>
101+
</div>
102+
<div>
103+
<el-avatar text="James Gosling" bgColor="#409eff"></el-avatar>
104+
</div>
105+
</div>
106+
</template>
107+
<script>
108+
export default {
109+
methods: {
110+
errorHandler() {
111+
return true
112+
},
113+
},
114+
}
115+
</script>
116+
```
117+
68118
:::
69119

70120
### Fallback when image load error
71121

72-
fallback when image load error
122+
fallback when image load error or src is empty
123+
124+
customize the display via the default slot, or by using `text` as a placeholder.
73125

74126
:::demo
127+
75128
```html
76129
<template>
77130
<div class="demo-type">
78-
<el-avatar :size="60" src="https://empty" @error="errorHandler">
79-
<img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/>
131+
<div>
132+
<el-avatar src="https://empty" @error="errorHandler">
133+
<img
134+
src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
135+
/>
80136
</el-avatar>
137+
</div>
138+
<div>
139+
<el-avatar
140+
src="https://empty"
141+
@error="errorHandler"
142+
text="James Gosling"
143+
bgColor="#409eff"
144+
></el-avatar>
145+
</div>
81146
</div>
82147
</template>
83148
<script>
84149
export default {
85150
methods: {
86151
errorHandler() {
87152
return true
88-
}
89-
}
153+
},
154+
},
90155
}
91156
</script>
157+
```
158+
159+
:::
160+
161+
### Custom Text Formatter
162+
163+
When using text as a placeholder, the last two characters are displayed by default, and hover displayed the full text.
164+
165+
You can also customize how to abbreviate it via the `textFormatter` method.
166+
167+
:::demo
92168

169+
```html
170+
<template>
171+
<div class="demo-type">
172+
<div>
173+
<el-avatar text="James Gosling" bgColor="#409eff"></el-avatar>
174+
</div>
175+
<div>
176+
<el-avatar
177+
text="Unassigned"
178+
bgColor="#409eff"
179+
:text-formatter="(s) => s.slice(0, 1)"
180+
:font-size="15"
181+
></el-avatar>
182+
</div>
183+
<div>
184+
<el-avatar
185+
text="Linus Torvalds"
186+
bgColor="#409eff"
187+
:text-formatter="(s) => s.split(' ').map(s=>s[0]).join('')"
188+
></el-avatar>
189+
</div>
190+
</div>
191+
</template>
93192
```
193+
94194
:::
95195

96196
### How the image fit its container
97197

98198
Set how the image fit its container for an image avatar, same as [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).
99199

100200
:::demo
201+
101202
```html
102203
<template>
103204
<div class="demo-fit">
104205
<div class="block" v-for="fit in fits" :key="fit">
105-
<span class="title">{{ fit }}</span>
106-
<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
206+
<span class="title">{{ fit }}</span>
207+
<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
107208
</div>
108209
</div>
109210
</template>
@@ -112,34 +213,41 @@ Set how the image fit its container for an image avatar, same as [object-fit](ht
112213
data() {
113214
return {
114215
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
115-
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
216+
url:
217+
'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
116218
}
117-
}
219+
},
118220
}
119221
</script>
120-
121222
```
223+
122224
:::
123225

124226
### Attributes
125227

126-
| Attribute | Description | Type | Accepted Values | Default |
127-
| ----------------- | -------------------------------- | --------------- | ------ | ------ |
128-
| icon | set representation type to Icon, more info on Icon Component | string | | |
129-
| size | set avatar size | number/string | number / large / medium / small | large |
130-
| shape | set avatar shape | string | circle / square | circle |
131-
| src | the address of the image for an image avatar | string | | |
132-
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | |
133-
| alt | This attribute defines an alternative text description of the image | string | | |
134-
| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover |
228+
| Attribute | Description | Type | Accepted Values | Default |
229+
| ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------ | ---------------------- |
230+
| icon | set representation type to Icon, more info on Icon Component | string | | |
231+
| size | set avatar size | number/string | number / large / medium / small | large |
232+
| shape | set avatar shape | string | circle / square | circle |
233+
| src | the address of the image for an image avatar | string | | |
234+
| srcSet | A list of one or more strings separated by commas indicating a set of possible image sources for the user agent to use | string | | |
235+
| alt | This attribute defines an alternative text description of the image | string | | |
236+
| fit | set how the image fit its container for an image avatar | string | fill / contain / cover / none / scale-down | cover |
237+
| text | When images cannot be loaded and no default slot is not used, will take the result of the textFormatter and use it as a text placeholder. will also be used for the default content of the tooltip | string | | |
238+
| fontSize | set text placeholders size | number | | 12 |
239+
| bgColor | set background color | string | | #c0c4cc |
240+
| textFormatter | format `text` to show the abbreviation in the avatar placeholder, last two characters by default | function | | (str) => str.slice(-2) |
241+
| tooltip | set tooltip content, if empty, take `text` as the tooltip content. | string | | |
135242

136243
### Events
137244

138-
| Event Name | Description | Parameters |
139-
| ------ | ------------------ | -------- |
140-
| error | handler when img load error, return false to prevent default fallback behavior |(e: Event) |
245+
| Event Name | Description | Parameters |
246+
| ---------- | ------------------------------------------------------------------------------ | ---------- |
247+
| error | handler when img load error, return false to prevent default fallback behavior | (e: Event) |
141248

142249
### Slot
143250

144-
| Slot Name | Description |
145-
| default | customize avatar content |
251+
| Slot Name | Description |
252+
| --------- | ------------------------ |
253+
| default | customize avatar content |

0 commit comments

Comments
 (0)