Avatar 头像

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

使用指南

在 page.json 中引入组件

"usingComponents": {
  "w-avatar": "wuss-weapp/w-avatar/index",
}

图片演示

代码演示

<w-pane title="Avatar" desc="头像" />

<w-pane desc="Default" />
<view class="pd" >
	<w-avatar size="small">W</w-avatar>
	<w-avatar>W</w-avatar>
	<w-avatar size="large">W</w-avatar>
</view>

<w-pane desc="Use src" />
<view class="pd" >
	<w-avatar size="small" src="/pages/assets/logo.png" />
	<w-avatar src="/pages/assets/logo.png" />
	<w-avatar size="large" src="/pages/assets/logo.png" />
</view>

<w-pane desc="Shape is square" />
<view class="pd" >
	<w-avatar size="small" scale shape="square">W</w-avatar>
	<w-avatar shape="square">W</w-avatar>
	<w-avatar shape="square" size="large">W</w-avatar>
</view>

<w-pane desc="Custom Style" />
<view class="pd" >
	<w-avatar size="small" wuss-class="custom1">W</w-avatar>
	<w-avatar wuss-class="custom2">W</w-avatar>
	<w-avatar wuss-class="custom3" size="large">W</w-avatar>
</view>

API

Attribute 属性

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

Event 事件

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

Slot 插槽

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

Class 自定义类名

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