JView UI

Appearance

展示用户头像，可支持图片/文字/图标类头像。

基本展示 ​

A
李
展开查看代码
vue
<template>
    <j-space>
        <j-avatar />
        <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar style="background-color: #1890ff">A</j-avatar>
        <j-avatar style="background-color: #f56a00">李</j-avatar>
    </j-space>
</template>
<template>
    <j-space>
        <j-avatar />
        <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar style="background-color: #1890ff">A</j-avatar>
        <j-avatar style="background-color: #f56a00">李</j-avatar>
    </j-space>
</template>

形状 ​

可通过shape属性控制头像形状。

A
李
展开查看代码
vue
<template>
    <j-space>
        <j-avatar />
        <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar shape="square" style="background-color: #1890ff">A</j-avatar>
        <j-avatar shape="square" style="background-color: #f56a00">李</j-avatar>
    </j-space>
</template>
<template>
    <j-space>
        <j-avatar />
        <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar shape="square" style="background-color: #1890ff">A</j-avatar>
        <j-avatar shape="square" style="background-color: #f56a00">李</j-avatar>
    </j-space>
</template>

尺寸 ​

可通过size属性控制头像大小，fontSize用于控制文字或头像的字体大小值。

PS: 支持响应式配置。

A
A
A
响应式：
展开查看代码
vue
<template>
    <j-space align="center">
        <j-avatar size="small" />
        <j-avatar />
        <j-avatar size="large" />
        <j-avatar size="small" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar size="large" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar size="small">A</j-avatar>
        <j-avatar>A</j-avatar>
        <j-avatar size="large">A</j-avatar>
    </j-space>

    <j-space style="margin-top: 20px; width: 100%" align="center">
        响应式：
        <j-avatar :size="{ xs: 20, sm: 28, md: 36, lg: 48, xxl: 60 }" :font-size="{ xs: 12, sm: 16, md: 20, lg: 28, xxl: 36 }" />
    </j-space>
</template>
<template>
    <j-space align="center">
        <j-avatar size="small" />
        <j-avatar />
        <j-avatar size="large" />
        <j-avatar size="small" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar size="large" src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        <j-avatar size="small">A</j-avatar>
        <j-avatar>A</j-avatar>
        <j-avatar size="large">A</j-avatar>
    </j-space>

    <j-space style="margin-top: 20px; width: 100%" align="center">
        响应式：
        <j-avatar :size="{ xs: 20, sm: 28, md: 36, lg: 48, xxl: 60 }" :font-size="{ xs: 12, sm: 16, md: 20, lg: 28, xxl: 36 }" />
    </j-space>
</template>

头像组 ​

AvatarGroup 组件用于组织和展示一组头像，其中shape, size, fontSize属性会作用于其下的 Avatar 组件。

超出max数量限制的元素将被聚合到一个元素下，通过浮层展示。

A李+2
J文
展开查看代码
vue
<template>
    <j-space>
        <j-avatar-group :max="3" style="padding: 50px; background-color: #b6b9a4">
            <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            <j-avatar style="background-color: #ab9a8d">A</j-avatar>
            <j-avatar style="background-color: #6d5441">李</j-avatar>
            <j-avatar style="background-color: #f56a00">刘</j-avatar>
            <j-avatar style="background-color: #1890ff">马</j-avatar>
        </j-avatar-group>
    </j-space>
    <j-space style="margin-top: 20px; width: 100%">
        <j-avatar-group size="large" shape="square" style="padding: 50px; background-color: #b6b9a4">
            <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            <j-avatar style="background-color: #1890ff">J</j-avatar>
            <j-avatar style="background-color: #f56a00">文</j-avatar>
        </j-avatar-group>
    </j-space>
</template>
<template>
    <j-space>
        <j-avatar-group :max="3" style="padding: 50px; background-color: #b6b9a4">
            <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            <j-avatar style="background-color: #ab9a8d">A</j-avatar>
            <j-avatar style="background-color: #6d5441">李</j-avatar>
            <j-avatar style="background-color: #f56a00">刘</j-avatar>
            <j-avatar style="background-color: #1890ff">马</j-avatar>
        </j-avatar-group>
    </j-space>
    <j-space style="margin-top: 20px; width: 100%">
        <j-avatar-group size="large" shape="square" style="padding: 50px; background-color: #b6b9a4">
            <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
            <j-avatar style="background-color: #1890ff">J</j-avatar>
            <j-avatar style="background-color: #f56a00">文</j-avatar>
        </j-avatar-group>
    </j-space>
</template>

带徽章的头像 ​

可以结合 Badge 组件使用。

9
展开查看代码
vue
<template>
    <j-space>
        <j-badge :count="9">
            <j-avatar />
        </j-badge>
        <j-badge dot>
            <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        </j-badge>
    </j-space>
</template>
<template>
    <j-space>
        <j-badge :count="9">
            <j-avatar />
        </j-badge>
        <j-badge dot>
            <j-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
        </j-badge>
    </j-space>
</template>

Avatar 属性 ​

除以下属性外，还支持原生属性，例如图片头像，可以支持srcset等原生属性。

参数说明类型默认值必填
src图片类头像的资源地址string无否
shape头像的形状"circle" | "square"无否
size头像的大小number | "default" | "small" | "large" | { lg: number; md: number; sm: number; xl: number; xs: number; xxl: number }无否
fontSize针对图标/文字类头像设置字体大小string | number | { lg: number; md: number; sm: number; xl: number; xs: number; xxl: number }无否

AvatarGroup 属性 ​

参数说明类型默认值必填
max头像组最大展示数量number无否
maxStyle设置聚合元素的样式CSSProperties无否
maxAttrs设置聚合元素的属性object无否
maxPopoverProps设置聚合元素 Popover 的属性object无否
size设置头像的大小，对 avatar 组件有效number | "default" | "small" | "large" | { lg: number; md: number; sm: number; xl: number; xs: number; xxl: number }无否
shape设置头像的形状，对 avatar 组件有效"circle" | "square"无否
fontSize设置头像的fontSize，对 avatar 组件有效string | number | { lg: number; md: number; sm: number; xl: number; xs: number; xxl: number }无否

Copyright © 2022-2024 All Rights Reserved by Tusi.