头像 Avatar

头像组件。

重要提示

重要提示

需在 App.vue 中引入 pure-styles 样式，@import '@/uni_modules/pure-styles/index.css';

兼容性

• 兼容：✅
• 不兼容：❌
• 未知：❔

H5	安卓	苹果	微信	支付宝	百度	抖音	QQ	快手	飞书	京东
✅	✅	✅	✅	✅	✅	✅	✅	✅	✅	✅

小红书	鸿蒙	360	华为快应用	快应用联盟
✅	❔	❔	❔	❔

插件市场地址

DCloud 插件市场地址

基础使用

• 通过 avatar 属性设置头像图片路径。
• 通过 default 属性设置默认头像图片路径。

<template>
    <pure-avatar avatar="/static/user-avatar.png" default="/static/default-avatar.png"></pure-avatar>
</template>

编辑按钮

• 通过 showEdit 属性设置是否显示编辑按钮。
• 通过 editIcon 属性设置编辑按钮的图标名称。

提示

辅助类使用规则

<template>
    <pure-avatar avatar="/static/user-avatar.png" default="/static/default-avatar.png" showEdit></pure-avatar>
</template>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	""	-	+1.0.0
avatar	头像图片路径	String	""	-	+1.0.0
default	默认头像图片路径，avatar加载失败后会显示默认头像	String	""	-	+1.0.0
mode	图片的裁剪模式，参考	String	aspectFill	-	+1.0.0
openType	openType 对应 <button/> 组件的 open-type 属性，但是只支持几种	String	chooseAvatar	getPhoneNumber、getUserInfo、login、openProfile	+1.0.0
showEdit	是否显示编辑按钮	Boolean	false	true	+1.0.0
editIcon	编辑图标名称，同图标组件（Icon）的 name 属性，参考	String	__paizhao	-	+1.0.0

Event

事件名	说明	回调参数	版本
onClick	点击事件	-	+1.0.0
getuserinfo	同 <button> 组件的对应事件，参考	-	+1.0.0
getphonenumber	同 <button> 组件的对应事件，参考	-	+1.0.0
chooseavatar	同 <button> 组件的对应事件，参考	-	+1.0.0
login	同 <button> 组件的对应事件，参考	-	+1.0.0
load	头像加载成功事件	-	+1.0.0
error	头像加载失败事件	-	+1.0.0

Slots

名称	说明	参数	版本
default	默认插槽，可以放其他内容，展示在头像图片上层	-	+1.0.0