更新记录

0.0.4（2024-10-03） 下载此版本

• fix: vue2

0.0.3（2024-10-02） 下载此版本

• fix: filter

0.0.2（2024-10-01） 下载此版本

• fix: group

平台兼容性

lime-avatar 头像

• 来代表用户或事物，支持图片、图标或字符展示，兼容uniapp/uniappx(h5,ios,安卓)

安装

插件市场导入即可

代码演示

基础用法

通过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

AvatarGroup Props

CSS 变量

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

打赏

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