LimeAvatar 头像

• 来代表用户或事物，支持图片、图标或字符展示，兼容uniapp/uniappx

安装

导入即可

代码演示

基础用法

通过src可设置图片，通过icon可设置图标,插槽可显示文本

<l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"></l-avatar>
<l-avatar icon="user"></l-avatar>
<l-avatar>A</l-avatar>

尺寸

通过size可设置头像尺寸，可选值有small/medium/large等，可以是50rpx/50px等带单位的具体值。

<l-avatar size="large" icon="user"></l-avatar>
<l-avatar icon="user"></l-avatar>
<l-avatar size="small">A</l-avatar>
<l-avatar size="30rpx">B</l-avatar>

形状

通过shape可设置头像形状，可选值有square/circle。默认是circle

<l-avatar icon="user"></l-avatar>
<l-avatar shape="square" icon="user"></l-avatar>

自定义颜色

通过color可设置头像颜色，通过text-color可设置图标或文本颜色。

<l-avatar color="#3283ff" icon="user"></l-avatar>
<l-avatar color="#34c471" shape="square" icon="user"></l-avatar>

头像组

通过max设置最多显示多少个，超过后显示一个折叠的头像，如+5,通过collapseText可设置折叠头像显示的内容。

<l-avatar-group :max="5" collapseFontSize="20rpx"  collapseText="更多" cascading="left-up">
	<l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"></l-avatar>
	<l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar2.png"></l-avatar>
	<l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar3.png"></l-avatar>
	<l-avatar src="https://tdesign.gtimg.com/mobile/demos/avatar4.png"></l-avatar>
	<l-avatar color="#3283ff">陈</l-avatar>
	<l-avatar color="#3283ff">王</l-avatar>
	<l-avatar color="#3283ff">李</l-avatar>
	<l-avatar color="#3283ff">黄</l-avatar>
</l-avatar-group>

查看示例

• 导入后直接使用这个标签查看演示效果

 // 代码位于 uni_modules/lime-avatar/compoents/lime-avatar 
<lime-avatar />

插件标签

• 默认 l-avatar 为 component
• 默认 l-avatar-group 为 component
• 默认 lime-avatar 为 demo

关于vue2的使用方式

• 插件使用了composition-api, 如果你希望在vue2中使用请按官方的教程vue-composition-api配置
• 关键代码是: 在main.js中 在vue2部分加上这一段即可.

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API

Avatar Props

参数	说明	类型	默认值
icon	图标。	string	-
size	尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定	string	medium
shape	形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定。可选项：circle	string	circle
src	图片地址	string	-
fontSize	图标或文本字体大小	string	-
color	背景色	string	-
textColor	文本颜色	string	-

AvatarGroup Props

参数	说明	类型	默认值
size	尺寸，示例值：small/medium/large/24px/38rpx 等	string	medium
shape	形状。可选值为 square/circle。	string	circle
max	能够同时显示的最多头像数量	number	-
cascading	图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up	string	right-up
collapseText	折叠头像显示内容	string	-
collapseFontSize	折叠头像图标或文本字体大小	string	-
collapseColor	折叠头像背景色	string	-
collapseTextColor	折叠头像文本颜色	string	-

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式。uvue app无效。

名称	默认值	描述
--l-avatar-bg-color	$primary-color-1	-
--l-avatar-text-color	$primary-color	-
--l-avatar-circle-border-radius	999px	-
--l-avatar-square-border-radius	12rpx	-
--l-avatar-small-size	70rpx	-
--l-avatar-medium-size	96rpx	-
--l-avatar-large-size	127rpx	-
--l-avatar-small-font-size	28rpx	-
--l-avatar-medium-font-size	36rpx	-
--l-avatar-large-font-size	58rpx	-
--l-avatar-small-icon-size	40rpx	-
--l-avatar-medium-icon-size	48rpx	-
--l-avatar-large-icon-size	58rpx	-
--l-avatar-small-border-width	4rpx	-
--l-avatar-medium-border-width	6rpx	-
--l-avatar-large-border-width	8rpx	-
--l-avatar-border-color	#fff	-
--l-avatar-group-overlapping	-20rpx	-

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。

源代码

组件源码