Avatar 组件

展示用户头像的控件。

基础用法

使用shape来定义样式，使用size来调整大小。

User

<template>
    <div class="avatar">
        <div class="circle">
            <kl-avatar shape="circle" size="small">User</kl-avatar>
            <kl-avatar shape="circle" size="normal">User</kl-avatar>
            <kl-avatar shape="circle" size="large">User</kl-avatar>
        </div>
        <div class="square">
            <kl-avatar shape="square" size="small">User</kl-avatar>
            <kl-avatar shape="square" size="normal">User</kl-avatar>
            <kl-avatar shape="square" size="large">User</kl-avatar>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.avatar {
    display: flex;
    justify-content: space-around;
    align-items: center;

    .circle {
        width: 250px;
        display: flex;
        justify-content: space-around;
        align-items: baseline;
    }
    .square {
        width: 250px;
        display: flex;
        justify-content: space-around;
        align-items: baseline;
    }
}
</style>

展示类型

支持使用图片，图标或者文字作为 Avatar。

用户

<template>
    <div class="avatar">
        <kl-avatar size="large">用户</kl-avatar>
        <kl-avatar
            src="https://anixuil.github.io/assets/logo.f9f38966.jpg"
            size="large"
        ></kl-avatar>
    </div>
</template>
<style lang="scss" scoped>
.avatar {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
</style>

API

Avatar

参数	说明	类型
size	Avatar 大小	`string`/`number`
shape	Avatar 形状	`string`
src	Avatar 图片的源地址	`string`
srcset	图片 Avatar 的原生 srcset 属性	`string`
alt	图片 Avatar 的原生 alt 属性	`string`

Slots

插槽名	说明
default	自定义头像展示的内容

Avatar 组件 #

基础用法 #

展示类型 #

API #

Avatar #

Slots #

Avatar 组件

基础用法

展示类型

API

Avatar

Slots