Element UI三十一Avatar头像

简介

el-avatar：该组件用于设置图标、图片或文字来展示用户或事物信息。其属性表入下，
其子组件的slot属性取值：

基础用法

通过shape和size属性可设置头像的形状和大小：

            <el-row><el-col :span="12"><div>circle</div><div><div><el-avatar :size="50" :src="circleUrl"></el-avatar></div><div v-for="size in sizeList" :key="size"><el-avatar :size="size" :src="circleUrl"></el-avatar></div></div></el-col><el-col :span="12"><div>square</div><div><div><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div><div v-for="size in sizeList" :key="size"><el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar></div></div></el-col></el-row><script>export default {data () {return {circleUrl: "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",squareUrl: "https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png",sizeList: ["large", "medium", "small"]}}}
</script>

虽然只设置了一行、两列，但是当第一个el-col的第一个图标占了12个分栏后，下一个图标就没地方放了，它就会自动跑到下一行，而将上一行的后12个分栏留给下一个el-col。所以虽然上图看起来好像有四行，但实际上在元素表中它只有一行。

展示类型

通过icon或src属性可指定展示的是图标还是图片，或者直接在组件内写内容则可以展示字符。

图片加载失败的fallback行为

通过error事件指定是否开启图片类头像加载失败后的回调，返回false表示关闭组件默认的fallback行为，返回true则展示开启；fallback行为一般是直接在该组件下添加一个img子组件，展示一张备用图片。下例展示的就是备用图片：

图片如何适应容器框

通过fit属性定义图片如何适应容器框，可取值fill,contain,cover,none,scale-down，默认为cover。该属性同原生属性object-fit。
官方文档
代码实例：“E:\sublime text 3\Sublime Text 3\itemname2\element-starter”

Element UI三十一Avatar头像相关推荐

Element ui Avatar头像管理组件实现当用户没有头像时以名称最后一个字为头像
el-avatar是一个比较方便的头像管理组件 src控制他的图片展示 <el-avatarclass = "avatar":src="item.images&qu ...
vue+element ui完成头像上传功能（文件转base64）以及自定义布局。
1.自定义布局查阅element ui的头像上传功能,发现是点击头像位置才可以上传,那我们可不可以点击头像外部的按钮来上传头像呢? element ui效果图: ...
从Element ui看开发公共组件的三种方式
在日常的开发工作中,封装自己的公共组件是很常见的需求,但想要组件更加优雅和通用也是一门学问.恰好前段时间用过Element ui,于是想学习这种库是如何封装插件的,这篇文章就是我的一点理解. 从入口文 ...
结合axios(formdata)+vue-cropper+element ui实现头像图片剪切上传
萌新用vue + axios + formdata 上传文件的爬坑之路 https://blog.csdn.net/qq_41688165/article/details/80834842 结合vue ...
vue问题三：element ui的upload组件上传图片成功和移除事件
element ui的upload组件上传图片成功和移除事件: 登录后获取到后台传的token存到中: sessionStorage.setItem("token",data.ob ...
实验管理系统springboot+vue+element ui项目开发
实验管理系统某学院实验老师长期采用人工的形式完成药品试剂的入库.查询.出库的流程.但这种方式存在诸多问题和不便: 1. 在仓库运行流程中效率不高,容易出错. 2. 管理人员不能方便的了解每种物品的状 ...
element ui 上传图片
element ui图片上传 1.template 部分 2. script 部分 3. scss 部分这玩意很简单,记录一下吧,给入门的小白用下 1.template 部分 <templat ...
Vue实战篇三十一：实现一个改进版的头条新闻
系列文章目录 Vue基础篇一:编写第一个Vue程序 Vue基础篇二:Vue组件的核心概念 Vue基础篇三:Vue的计算属性与侦听器 Vue基础篇四:Vue的生命周期(秒杀案例实战) Vue基础篇五:V ...
HeyUI组件库12月更新日志：Clipboard复制剪切板，Avatar头像
时隔很久,HeyUI终于有了一些新的组件补充了这个组件都是来自于近期的一些开发思考,希望大家多多指点 HeyUI 对于不熟悉HeyUI组件库的同学,我在这里补充一下信息: HeyUI是一个基于Vue ...

Element UI三十一Avatar头像

简介

基础用法

展示类型

图片加载失败的fallback行为

图片如何适应容器框

Element UI三十一Avatar头像相关推荐

最新文章

热门文章