mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
55348b30b6
* style: use prettier * style: just prettier format, no code changes * style: eslint fix object-shorthand, prefer-const * style: fix no-void * style: no-console
6.7 KiB
6.7 KiB
Avatar
Los avatares pueden utilizarse para representar personas u objetos. Soporta imágenes, iconos o caracteres.
Básico
Use los props shape
y size
para establecer la forma y el tamaño del avatar
:::demo
<template>
<el-row class="demo-avatar demo-basic">
<el-col :span="12">
<div class="sub-title">circle</div>
<div class="demo-basic--circle">
<div class="block">
<el-avatar :size="50" :src="circleUrl"></el-avatar>
</div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar :size="size" :src="circleUrl"></el-avatar>
</div>
</div>
</el-col>
<el-col :span="12">
<div class="sub-title">square</div>
<div class="demo-basic--circle">
<div class="block">
<el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar>
</div>
<div class="block" v-for="size in sizeList" :key="size">
<el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar>
</div>
</div>
</el-col>
</el-row>
</template>
<script>
export default {
data() {
return {
circleUrl:
'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
squareUrl:
'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
sizeList: ['large', 'medium', 'small'],
}
},
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
squareUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
sizeList: ['large', 'medium', 'small'],
});
return {
...toRefs(state),
};
},
});
</setup>
-->
:::
Tipos
Soporta imágenes, iconos o caracteres.
:::demo
<template>
<div class="demo-type">
<div>
<el-avatar icon="el-icon-user-solid"></el-avatar>
</div>
<div>
<el-avatar
src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
></el-avatar>
</div>
<div>
<el-avatar> user </el-avatar>
</div>
</div>
</template>
:::
Fallback cuando se produce un error de carga de imagen
Fallback cuando se produce un error de carga de imagen
:::demo
<template>
<div class="demo-type">
<el-avatar :size="60" src="https://empty" @error="errorHandler">
<img
src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
/>
</el-avatar>
</div>
</template>
<script>
export default {
methods: {
errorHandler() {
return true
},
},
}
</script>
<!--
<setup>
import { defineComponent } from 'vue'
export default defineComponent({
setup() {
const errorHandler = () => true;
return {
errorHandler,
};
},
});
</setup>
-->
:::
Cómo encaja la imagen en su contenedor
Establezca cómo la imagen se ajusta a su contenedor para un avatar de imagen, igual que object-fit.
:::demo
<template>
<div class="demo-fit">
<div class="block" v-for="fit in fits" :key="fit">
<span class="title">{{ fit }}</span>
<el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar>
</div>
</div>
</template>
<script>
export default {
data() {
return {
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
}
},
}
</script>
<!--
<setup>
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
setup() {
const state = reactive({
fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],
url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
});
return {
...toRefs(state),
};
},
});
</setup>
-->
:::
Atributos
Atributo | Descripción | Tipo | Valores aceptados | Por defecto |
---|---|---|---|---|
icon | establece el tipo de representación a Icono, más información en Componente Icon | string | ||
size | Establece el tamaño del avatar | number/string | number / large / medium / small | large |
shape | establece la forma del avatar | string | circle / square | circle |
src | la dirección de la imagen para un avatar de imagen | string | ||
srcSet | Una lista de una o más cadenas separadas por comas que indica un conjunto de posibles fuentes de imágenes para que el agente de usuario las utilice. | string | ||
alt | Este atributo define una descripción de texto alternativo de la imagen | string | ||
fit | establece cómo encaja la imagen en su contenedor para un avatar de imagen | string | fill / contain / cover / none / scale-down | cover |
Eventos
Nombre | Descripción | Parámetros |
---|---|---|
error | cuando se produce un error de carga de img, devuelve false para evitar el comportamiento de repliegue predeterminado | (e: Event) |
Slot
| Nombre | Descripción | | default | personalice el contenido del avatar |