vue element plus Avatar 头像

简介: vue element plus Avatar 头像

Avatar 组件可以用来代表人物或对象, 支持使用图片、图标或者文字作为 Avatar。

基础用法#

使用 shapesize 属性来设置 Avatar 的形状和大小。

circle

square

展示类型#

支持使用图片,图标或者文字作为 Avatar。

user

回退行为#

图片加载失败时的回退行为。

适应容器#

当使用图片作为用户头像时,设置该图片如何在容器中展示。与object-fit 属性一致

fill

contain

cover

none

scale-down

API#

Attributes#

名称 说明 类型 默认值
icon 设置 Avatar 的图标类型,具体参考 Icon 组件 string / Component
size Avatar 大小 number / enum default
shape Avatar 形状 enum circle
src Avatar 图片的源地址 string
src-set 图片 Avatar 的原生 srcset 属性 string
alt 图片 Avatar 的原生 alt 属性 string
fit 当展示类型为图片的时候,设置图片如何适应容器 enum cover

Events#

名称 说明 类型
error 图片加载失败时触发 Function

Slots#

插槽名 说明
default 自定义头像展示内容

源代码#

组件文档

相关文章
|
4天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
24 1
|
3天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
|
3天前
|
资源调度 JavaScript UED
vue路由的基础知识总结,vueRouter插件的安装与使用
vue路由的基础知识总结,vueRouter插件的安装与使用
|
3天前
|
JavaScript
|
4天前
|
编解码 JavaScript API
Vue在移动端的表现如何?
【5月更文挑战第30天】Vue在移动端的表现如何?
11 2
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
993 0
|
4天前
|
JavaScript 前端开发 API
Vue与其他框架的对比优势
【5月更文挑战第30天】Vue与其他框架的对比优势
11 1
|
5天前
|
JavaScript
Vue常用知识点总结
Vue常用知识点总结
12 0
|
5天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
25 7
|
5天前
|
JSON JavaScript 前端开发