头像

头像组件。

基础使用

通过 src 属性设置头像图片。

<template>
	<pure-avatar src="https://picsum.photos/200/300"></pure-avatar>
</template>

默认头像

通过 default-src 属性设置默认头像图片。

<template>
	<pure-avatar
		src="https://picsum.photos/200/300"
		default-src="/static/avatar.png"
	></pure-avatar>
</template>

编辑按钮

通过 edit 属性设置是否显示编辑按钮。

<template>
	<pure-avatar
		src="https://picsum.photos/200/300"
		default-src="/static/avatar.png"
		edit
	></pure-avatar>
</template>

自定义大小

通过 size 属性设置头像大小，默认 60px。

<template>
	<pure-avatar
		src="https://picsum.photos/200/300"
		default-src="/static/avatar.png"
		size="80px"
	></pure-avatar>
</template>

属性

名称	类型	默认值	说明
hoverClass	String	pure-hover	按下去的样式类
src	String		头像图片地址
defaultSrc	String		默认头像图片地址
size	String	60px	头像大小
mode	String	aspectFill	裁剪模式 参考
showEdit	Boolean	false	是否显示编辑按钮
editIconName	String	__edit	编辑按钮图标名称
preview	Boolean	false	是否开启点击预览

事件

名称	参数	说明
onClick		点击事件
onLoad	event	加载事件 参考
onError	event	错误事件 参考

插槽

名称	参数	说明
#default		默认，其他内容

样式变量

名称	说明
--pure-avatar-size	头像大小
--pure-avatar-radius	圆角大小
--pure-avatar-overflow	溢出模式
--pure-avatar-edit-background	编辑按钮背景
--pure-avatar-edit-color	编辑按钮字体颜色
--pure-avatar-edit-font-size	编辑按钮字体大小
--pure-avatar-edit-font-weight	编辑按钮字体粗细