Avatar头像

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-avatar": "/miniprogram_npm/vtuweapp/avatar/vtu-avatar"
    3. }
    4.

    代码演示

    形状

    设置头像形状

    1. <vtu-avatar src="/assets/image/avatar/1.png"></vtu-avatar>
    2. <vtu-avatar src="/assets/image/avatar/2.png" round></vtu-avatar>
    3. <vtu-avatar src="/assets/image/avatar/3.png" smooth></vtu-avatar>
    4. <vtu-avatar src="/assets/image/avatar/4.png" circle></vtu-avatar>
    5.

    尺寸

    使用size属性，控制头像大小，有defaultminismalllarge四种选择

    1. <vtu-avatar src="/assets/image/avatar/1.png" circle size="mini"></vtu-avatar>
    2. <vtu-avatar src="/assets/image/avatar/2.png" circle size="small"></vtu-avatar>
    3. <vtu-avatar src="/assets/image/avatar/3.png" circle size="default"></vtu-avatar>
    4. <vtu-avatar src="/assets/image/avatar/4.png" circle size="large"></vtu-avatar>
    5.

    头像徽章

    给头像添加徽章

    1. <vtu-avatar src="/assets/image/avatar/3.png" circle size="default">
    2.   <vtu-badge slot="badge" value="10" right="-10px"></vtu-badge>
    3. </vtu-avatar>
    4. <vtu-avatar src="/assets/image/avatar/1.png" circle size="default">
    5.   <vtu-badge slot="badge" icon="iconfont icon-xingbie" bg-color="blue" right="-10px"></vtu-badge>
    6. </vtu-avatar>
    7. <vtu-avatar src="/assets/image/avatar/2.png" circle size="default">
    8.   <vtu-badge slot="badge" icon="iconfont icon-xingbienvxianxing" bg-color="red" right="-10px"></vtu-badge>
    9. </vtu-avatar>
    10. <vtu-avatar src="/assets/image/avatar/4.png" circle size="default">
    11.   <vtu-badge slot="badge" is-dot bg-color="red" right="0px" top="0px"></vtu-badge>
    12. </vtu-avatar
    13.

    内嵌文字

    头像显示文字

    1. <vtu-avatar content="图" circle size="mini" bg-color="red" color="#fff"></vtu-avatar>
    2. <vtu-avatar content="图" circle size="small" bg-color="red" color="#fff"></vtu-avatar>
    3. <vtu-avatar content="图" circle size="default" bg-color="red" color="#fff"></vtu-avatar>
    4. <vtu-avatar content="图" circle size="large" bg-color="red" color="#fff"></vtu-avatar>
    5.

    内嵌图标

    头像显示图标

    <vtu-avatar icon="iconfont icon-biaoxingfill" circle size="mini" bg-color="orange" color="#fff"></vtu-avatar>
<vtu-avatar icon="iconfont icon-biaoxingfill" circle size="small" bg-color="orange" color="#fff"></vtu-avatar>
<vtu-avatar icon="iconfont icon-biaoxingfill" circle size="default" bg-color="orange" color="#fff"></vtu-avatar>
<vtu-avatar icon="iconfont icon-biaoxingfill" circle size="large" bg-color="orange" color="#fff"></vtu-avatar>

    默认头像

    没有头像图片时，默认显示图片

    <vtu-avatar circle size="mini"></vtu-avatar>
<vtu-avatar circle size="small"></vtu-avatar>
<vtu-avatar circle size="default"></vtu-avatar>
<vtu-avatar circle size="large"></vtu-avatar>

    上传头像

    <vtu-avatar src="{{uploadImgPath1}}" round upload bind:change="uploadImg1"></vtu-avatar>

Page({
  data: {
    uploadImgPath1: "https://activity.vtuzx.com/doc/vtuUI/weapp/avatar/1.png"
  },

  uploadImg1: function (e) {
    this.setData({
      uploadImgPath1: e.detail.path
    })
  }
});

    组件参数

    Props

    参数说明类型默认值必填
    src头像图片地址String-否
    icon图标名称String-否
    round圆角形状Booleanfalse否
    smooth圆滑形状Booleanfalse否
    circle圆形形状Booleanfalse否
    color图标或文字颜色String-否
    bgColor背景色String-否
    size头像尺寸，有defaultminismalllarge四种选择Stringdefault否
    content内嵌文字内容String-否
    width自定义头像宽度String-否
    upload上传图片Booleanfalse否
    size-type所选的图片的尺寸，upload=true时有效Array['original', 'compressed']否
    source-type选择图片的来源，upload=true时有效Array['album', 'camera']否

    Events

    方法名说明参数返回值
    bind:click点击事件-绑定的参数对象
    bind:change头像上传事件-选择图片

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Avatar 头像 - 图1