Avatar 头像

Avatar 组件用来展示用户头像。

基础用法

可以使用size属性来设置头像的大小，默认为 medium。使用shape属性来设置头像的形状，默认为 circle。 size属性接受 large、medium、small三个字符串值，或者传入一个number值来设置大小，单位为px。

circle

square

<template>
    <div class="container">
        <h3>circle</h3>
        <div class="list">
            <ym-avatar icon="user" size="small"></ym-avatar>
            <ym-avatar icon="user"></ym-avatar>
            <ym-avatar icon="user" size="large"></ym-avatar>
            <ym-avatar icon="user" :size="60"></ym-avatar>
            <ym-avatar icon="user" :size="70"></ym-avatar>
        </div>
    </div>
    <div class="container">
        <h3>square</h3>
        <div class="list">
            <ym-avatar icon="user" size="small" shape="square"></ym-avatar>
            <ym-avatar icon="user" shape="square"></ym-avatar>
            <ym-avatar icon="user" size="large" shape="square"></ym-avatar>
            <ym-avatar icon="user" :size="60" shape="square"></ym-avatar>
            <ym-avatar icon="user" :size="70" shape="square"></ym-avatar>
        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.list {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-around;
}
</style>

显示类型

可以使用src属性来设置头像的图片地址，也可以使用icon属性来设置头像的图表类型，如果两者均没有设置，还可以使用默认插槽来设置头像的内容。

<template>
    <div class="container">
        <div class="list">
            <ym-avatar icon="user" :size="60"></ym-avatar>
            <ym-avatar src="https://jeek-space-blog.top:3000/images/user/8e9bab04192dea62e77cb066e6c3c7d3.jpeg" :size="60"></ym-avatar>
            <ym-avatar  :size="60">
                <ym-icon icon="home" color="#fff"></ym-icon>
            </ym-avatar>

        </div>
    </div>
</template>

<script setup lang="ts">

</script>

<style scoped>
.container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.list {
    display: flex;
    gap: 20px;
    align-items: center;
    justify-content: space-around;
}
</style>

Avatar API

Props

Name	Description	Type	Default
src	头像图片的 URL	string	-
icon	头像的图标类型	string	-
size	头像的大小	string | number	medium
shape	头像的形状	string	circle
alt	头像的替代文本	string	-
fit	头像的填充模式	string	cover

Events

Name	Description	Type
error	头像加载失败时触发的事件	(error: Error) => void

Slots

Name	Description
default	默认插槽，用于自定义头像内容