Avatar 头像

基础用法

默认浅色背景，可设置 dark 为深色背景；circle 可设置为圆形。

查看代码

<template>
	<demo-container class="gov-demo-avatar">
		<gov-avatar icon="user" size="large" />
		<gov-avatar icon="user" />
		<gov-avatar icon="user" size="small" />
		<gov-avatar icon="user" dark size="large" />
		<gov-avatar icon="user" dark />
		<gov-avatar icon="user" dark size="small" />
		<hr />
		<gov-avatar icon="user" circle size="large" />
		<gov-avatar icon="user" circle />
		<gov-avatar icon="user" circle size="small" />
		<gov-avatar icon="user" dark circle size="large" />
		<gov-avatar icon="user" dark circle />
		<gov-avatar icon="user" dark circle size="small" />
	</demo-container>
</template>

自定义颜色

默认填充颜色为浅色背景，可自定义背景色。

查看代码

<template>
	<demo-container class="gov-demo-avatar">
		<gov-avatar icon="user" color="#1677ff" />
		<gov-avatar icon="user" color="#ff6900" />
		<gov-avatar icon="user" color="#87d068" />
	</demo-container>
</template>

自定义尺寸

除了 small、default、large 以外，还可以设置以像素为单位的头像大小。

控制台

 头像大小:100px 

查看代码

<template>
	<demo-container class="gov-demo-avatar">
		<gov-input-number
			v-model="size"
			:step="10"
			:min="30"
			:max="200"
			suffix="px"
			controls
		/>
		<hr />
		<gov-avatar :size="size" icon="user" />
		<template #console> 头像大小:{{ size }}px </template>
	</demo-container>
</template>

<script setup>
import { ref } from "vue";
const size = ref(100);
</script>

自定义内容

多种内容定义，可以定义 icon、自定义内容、或者图片 src。

查看代码

<template>
	<demo-container class="gov-demo-avatar">
		<gov-avatar icon="user" />
		<gov-avatar>陈</gov-avatar>
		<gov-avatar src="/avatar.jpg" />
	</demo-container>
</template>

超链接

当设置 href 地址后，会渲染为超链接，点击头像可以打开链接地址。

查看代码

<template>
	<demo-container class="gov-demo-avatar">
		<gov-avatar
			src="/avatar.jpg"
			href="http://www.baidu.com"
			target="_blank"
		/>
	</demo-container>
</template>

Attributes

属性名	说明	类型	可选值	默认值
color	背景颜色	String	—	—
circle	是否为圆形	Boolean	true, false	false
size	大小	Number/String	'small', 'default', 'large' 或 Number（像素值）	"default"
dark	是否深背景	Boolean	true, false	false
src	图片地址	String	—	—
icon	图标名称	String	—	—
href	链接地址	String	—	—
target	链接打开目标	String	—	"_blank"

Events

事件名	说明	回调参数
click	点击头像时触发	事件对象

Slots

插槽名	说明	作用域插槽	内容
icon	自定义图标	是	可以放置自定义图标或图片。
default	默认插槽	否	可以放置文本或子组件。