Avatar头像

适用于需要展示用户头像的地方。

示例图

基础用法

页面 .json 文件 usingComponents 中引入组件

// json
{
    "usingComponents": {
        "mx-avatar": "/components/mxwui/avatar/index"
    }
}

页面 .wxml 文件中使用组件

<mx-avatar />

更多用法示例

头像地址 url

属性：url，提供了一个默认头像。

默认头像可在 src/components/mxwui/utils/common.js 文件中替换常量 AVATAR。

<mx-avatar url="图片地址" />

头像大小 size

属性：size，默认 140，数字，不带单位，默认使用rpx。

<mx-avatar size="80" />

是否圆形头像 round

属性：round，默认 true，默认圆形头像。

• 圆形头像

<mx-avatar />

<mx-avatar round />

<mx-avatar round="{{true}}" />

• 方形头像

<mx-avatar round="{{false}}" />

圆角 radius

属性：radius，默认 4，数字，不带单位，默认使用rpx。

圆角只对方形头像有效，因为圆形头像默认使用100%。

<mx-avatar radius="16" />

边框颜色 borderColor

属性：borderColor，默认 #FFFFFF，支持任何合法的颜色值。

<mx-avatar borderColor="#CA0E2D" />

边框粗细 borderWeight

属性：borderWeight，默认 2，数字，不带单位，默认使用rpx。

<mx-avatar borderWeight="4" />

自定义事件

事件：bind:avatar_tap，头像点击回调事件。

<mx-avatar 
    bind:avatar_tap="handleAvatar" 
/>

参数

事件

其他说明

无