Avatar 头像

用来代表用户或事物，支持图片、图标或字符展示。

使用指南

在 page.json 中引入组件

  1. "usingComponents": {
  2.   "w-avatar": "wuss-weapp/w-avatar/index",
  3. }

图片演示

Avatar 头像 - 图1

代码演示

  1. <w-pane title="Avatar" desc="头像" />
  3. <w-pane desc="Default" />
  4. <view class="pd" >
  5.     <w-avatar size="small">W</w-avatar>
  6.     <w-avatar>W</w-avatar>
  7.     <w-avatar size="large">W</w-avatar>
  8. </view>
  10. <w-pane desc="Use src" />
  11. <view class="pd" >
  12.     <w-avatar size="small" src="/pages/assets/logo.png" />
  13.     <w-avatar src="/pages/assets/logo.png" />
  14.     <w-avatar size="large" src="/pages/assets/logo.png" />
  15. </view>
  17. <w-pane desc="Shape is square" />
  18. <view class="pd" >
  19.     <w-avatar size="small" scale shape="square">W</w-avatar>
  20.     <w-avatar shape="square">W</w-avatar>
  21.     <w-avatar shape="square" size="large">W</w-avatar>
  22. </view>
  24. <w-pane desc="Custom Style" />
  25. <view class="pd" >
  26.     <w-avatar size="small" wuss-class="custom1">W</w-avatar>
  27.     <w-avatar wuss-class="custom2">W</w-avatar>
  28.     <w-avatar wuss-class="custom3" size="large">W</w-avatar>
  29. </view>

API

Attribute 属性

属性说明类型默认值
size设置头像的大小，可选值为 small、default、largestringdefault
shape指定头像的形状，可选值为 circle、squarestringcircle
src图片类头像的 src 地址string-

Event 事件

事件名说明参数
bind:click点击头像触发-

Slot 插槽

名称说明
-文本类头像自定义内容

Class 自定义类名

类名说明
wuss-class根节点样式类