代码拉取完成,页面将自动刷新
同步操作将从 smallwei/avue-doc 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
用来代表用户或事物,支持图片、图标或字符展示。 :::tip 1.0.7+ ::::
:::demo 头像有三种尺寸,两种形状可选。
<div>
<div class="avue-line">
<avue-avatar :size="64" icon="el-icon-circle-plus-outline"></avue-avatar>
<avue-avatar size="large" icon="el-icon-circle-plus-outline"></avue-avatar>
<avue-avatar icon="el-icon-circle-plus-outline"></avue-avatar>
<avue-avatar size="small" icon="el-icon-circle-plus-outline"></avue-avatar>
</div>
<br />
<div class="avue-line">
<avue-avatar shape="square" :size="64" icon="el-icon-circle-plus-outline"></avue-avatar>
<avue-avatar shape="square" size="large" icon="el-icon-circle-plus-outline"></avue-avatar>
<avue-avatar shape="square" icon="el-icon-circle-plus-outline"></avue-avatar>
<avue-avatar shape="square" size="small" icon="el-icon-circle-plus-outline"></avue-avatar>
</div>
:::
:::demo 支持三种类型:图片、Icon 以及字符,其中 Icon 和字符型可以自定义图标颜色及背景色。
<div class="avue-line">
<avue-avatar icon="el-icon-circle-plus-outline"></avue-avatar>
<avue-avatar>U</avue-avatar>
<avue-avatar>USER</avue-avatar>
<avue-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"></avue-avatar>
<avue-avatar style="color: #f56a00; background-color: #fde3cf">U</avue-avatar>
<avue-avatar style="background-color:#87d068" icon="el-icon-circle-plus-outline"></avue-avatar>
</div>
:::
:::demo 对于字符型的头像,当字符串较长时,字体大小可以根据头像宽度自动调整。
<div>
<avue-avatar shape="square" size="large" :style="{backgroundColor: color, verticalAlign: 'middle'}">
{{avatarValue}}</avue-avatar>
<el-button size="small" style="margin-left:16px;vertical-align: 'middle'" @click="changeValue">改变</el-button>
</div>
</div>
<script>
var UserList = ['U', 'Lucy', 'Tom', 'Edward']
var colorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae']
export default {
data() {
return {
avatarValue: UserList[0],
color: colorList[0],
}
},
methods: {
changeValue() {
var index = UserList.indexOf(this.avatarValue)
this.avatarValue = index < UserList.length - 1 ? UserList[index + 1] : UserList[0]
this.color = index < colorList.length - 1 ? colorList[index + 1] : colorList[0]
},
}
}
</script>
:::
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
icon | 设置头像的图标类型 | String | - | - |
shape | 指定头像的形状 | String | circle/square | circle |
size | 设置头像的大小 | String | large/small | - |
src | 图片类头像的资源地址 | String | - | - |
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。