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 自定义类名