056_Avatar头像

1. Avatar头像

1.1. 用图标、图片或者字符的形式展示用户或事物信息。

1.2. Attributes

参数	说明	类型	可选值	默认值
icon	设置头像的图标类型, 参考Icon组件	string	无	无
size	设置头像的大小	number/string	number / large / medium / small	large
shape	设置头像的形状	string	circle / square	circle
src	图片头像的资源地址	string	无	无
srcSet	以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像	string	无	无
alt	描述图像的替换文本	string	无	无
fit	当展示类型为图片的时候, 设置图片如何适应容器框	string	fill / contain / cover / none / scale-down	cover

1.3. Events

事件名	说明	回调参数
error	图片类头像加载失败的回调, 返回false会关闭组件默认的fallback行为	(e: Event)

1.4. Slots

name	说明
default	自定义头像展示内容

2. Avatar头像例子

2.1. 使用脚手架新建一个名为element-ui-avatar折叠面板的前端项目, 同时安装Element插件。

2.2. 编辑index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Avatar from '../components/Avatar.vue'
import TypeAvatar from '../components/TypeAvatar.vue'
import ImgAvatar from '../components/ImgAvatar.vue'
import FitAvatar from '../components/FitAvatar.vue'Vue.use(VueRouter)const routes = [{ path: '/', redirect: '/Avatar' },{ path: '/Avatar', component: Avatar },{ path: '/TypeAvatar', component: TypeAvatar },{ path: '/ImgAvatar', component: ImgAvatar },{ path: '/FitAvatar', component: FitAvatar }
]const router = new VueRouter({routes
})export default router

2.3. 在components下创建Avatar.vue

<template><div><h1>基本用法</h1><h4>通过shape和size设置头像的形状和大小。</h4><el-row><el-col :span="6"><div class="sub-title">circle</div><div class="demo-basic--circle"><div class="block"><el-avatar :size="50" :src="circleUrl"></el-avatar></div><div class="block" v-for="size in sizeList" :key="size"><el-avatar :size="size" :src="circleUrl"></el-avatar></div></div></el-col><el-col :span="6"><div class="sub-title">square</div><div class="demo-basic--circle"><div class="block"><el-avatar shape="square" :size="50" :src="squareUrl"></el-avatar></div><div class="block" v-for="size in sizeList" :key="size"><el-avatar shape="square" :size="size" :src="squareUrl"></el-avatar></div></div></el-col></el-row></div>
</template><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><style scoped>
/deep/.sub-title {width: 100%;text-align: center;
}
/deep/.block {display: inline-flex;width: 25%;height: 100px;justify-content: center;vertical-align: middle;align-items: center;
}
</style>

2.4. 在components下创建TypeAvatar.vue

<template><div><h1>展示类型</h1><h4>支持三种类型: 图标、图片和字符。</h4><el-avatar icon="el-icon-user-solid"></el-avatar><el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar><el-avatar> user </el-avatar></div>
</template>

2.5. 在components下创建ImgAvatar.vue

<template><div><h1>图片加载失败的fallback行为</h1><h4>当展示类型为图片的时候, 图片加载失败的fallback行为。</h4><el-avatar :size="60" src="https://empty" @error="errorHandler"><img src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"/></el-avatar></div>
</template><script>
export default {methods: {errorHandler () {return true}}
}
</script>

2.6. 在components下创建FitAvatar.vue

<template><div><h1>图片如何适应容器框</h1><h4>当展示类型为图片的时候, 使用fit属性定义图片如何适应容器框, 同原生object-fit。</h4><div class="block" v-for="fit in fits" :key="fit"><span class="title">{{ fit }}</span><el-avatar shape="square" :size="100" :fit="fit" :src="url"></el-avatar></div></div>
</template><script>
export default {data () {return {fits: ['fill', 'contain', 'cover', 'none', 'scale-down'],url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'}}
}
</script><style scoped>
/deep/.block {display: inline-block;width: 200px;text-align: center;
}
/deep/.title {display: block;height: 30px;line-height: 30px;
}
</style>

2.7. 运行项目, 访问http://localhost:8080/#/Avatar

2.8. 运行项目, 访问http://localhost:8080/#/TypeAvatar

2.9. 运行项目, 访问http://localhost:8080/#/ImgAvatar

2.10. 运行项目, 访问http://localhost:8080/#/FitAvatar

056_Avatar头像相关推荐

Java获取游戏头像_java爬取堆糖所有头像(高质量版头像)
百度贴吧的用户头像爬下来之后,图片经过裁剪,尺寸太小,都是110*110之类的,并且有很多用户被注销后,头像是缩略图重复,所以爬了堆糖里面的头像,堆糖里的头像质量还是蛮高的. 堆糖官网:www.dui ...
python画圣诞帽_用Python给头像加上圣诞帽
原标题:用Python给头像加上圣诞帽随着圣诞的到来,大家纷纷@官微给自己的头像加上一顶圣诞帽.我们有必要写一个程序来做这件事情. 用到的工具 OpenCV dlib 流程一.素材准备首先我们需 ...
iOS 实现点击微信头像效果
来源:伯乐在线 - 小良如有好文章投稿,请点击 → 这里了解详情如需转载,发送「转载」二字查看说明公司产品需要实现点击个人主页头像可以放大头像.缩放头像.保存头像效果(和点击微信个人头像类似), ...
springboot 头像上传文件流保存文件流返回浏览器查看区分操作系统 windows 7 or linux...
1 //我的会员中心头像上传接口 2 /*windows 调试*/ 3 @Value("${appImg.location}") 4 private String winPath ...
iOS环信聊天界面中点击头像和消息的几种状态
/* 环信自带头像点击事件 */ - (void)messageViewController:(EaseMessageViewController *)viewController didSelect ...
使用pinchzoom实现头像剪裁
pinchzoom 官网 http://manuelstofer.github.io/pinchzoom/ PortraitClip.css .pinch-page{position:fixed;to ...
凤凰网制作的 “中国挺住” 桌面与MSN，QQ头像下载
凤凰网制作的 "中国挺住" 桌面与MSN,QQ头像下载. 点击下载转载于:https://www.cnblogs.com/yajiya/archive/2008/05/24/12 ...
android写代码截屏微信,android 模仿微信头像裁剪
android 在android开发中经常会碰到修改头像的功能需求, 而在修改头像>中最难的部分就是在头像的裁剪功能.虽说网上一大堆裁剪的例子,但最重要的是要理解里面的实现原理,这样以后自己改起 ...
CT片居然可以这么玩：用头部CT断层扫描片复原三维头像
作者:天元浪子来源:Python作业辅导员前言 CT是现代医学影像的主力设备,寻常百姓并不陌生.通常,一张CT片由多张连续断层扫描的图像组成.在医生眼中,CT片展示了人体器官的形态和性质,是判断病 ...

056_Avatar头像

056_Avatar头像相关推荐

最新文章

热门文章