element ui el-avatar 源码解析零基础逐行解析

2023-12-21 06:30

本文主要是介绍element ui el-avatar 源码解析零基础逐行解析,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

avatar功能介绍

快捷配置头像的样式

avatar 的参数配置

属性说明参数
size尺寸type string 类型 (‘large’,‘medium’,‘small’)number类型
validator 校验
shape形状circle (原型) square(方形)
icon传入的icon
src传入的图片string类型 可以是本地图片(本地图片需要在js中requir导入,不可直接使用相对路劲引用)
也可以是网络地址
srcSet是一种响应式网页设计,它允许开发者为图像提供不同大小和分辨率的版本,以便根据设备的屏幕大小和像素密度自动选择最适合的图像进行显示例如srcset=“image1.jpg 1x, image2.jpg 2x, image3.jpg 3x” 属性接受一组逗号分隔的描述符和图像路径
浏览器会根据设备的像素密度选择合适的图像进行加载,例如在像素密度为2x的设备上,会选择加载 image2.jpg。
error传入的图片异常函数图片加载失败时,触发的异常函数
fitobject-fit 的参数 img图片自适应方案,类似于background-size的属性fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器
contain 保持原有尺寸比例。内容被缩放。
cover 保持原有尺寸比例。但部分内容可能被剪切。
none 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
scale-down 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。

avatar的样式类名根据传入的参数处理

  computed: {avatarClass() {// 类名 集合const { size, icon, shape } = this;console.log("size",size)// size avatar 图标的尺寸// icon 图标// shpe形状let classList = ['el-avatar'];// classList 类名 集合if (size && typeof size === 'string') {classList.push(`el-avatar--${size}`);}if (icon) {classList.push('el-avatar--icon');}if (shape) {classList.push(`el-avatar--${shape}`);}// classList.join(" ") 就是将名的数组以空格为连接符拼接到一起return classList.join(' ');}},

代码逻辑

  • 定义默认的 classList = 为 [‘el-avatar’]
  • 根据size、icon、shape 和 el-avatar 拼接成类名
  • 然后将拼接好的类名数组用join(’ ')拼接成字符串
  • 返回 并渲染到 html的class上

头像异常的处理逻辑

    handleError() {const { error } = this;const errorFlag = error ? error() : undefined;// 图片类头像加载失败的回调, 返回 false 会关闭组件默认的 fallback 行为if (errorFlag !== false) {this.isImageExist = false;}}

renderAvatar 渲染头像的主体逻辑

    renderAvatar() {const { icon, src, alt, isImageExist, srcSet, fit } = this;console.log("=======================",icon, src, alt, isImageExist, srcSet, fit)if (isImageExist && src) {// 图片路径存在,就渲染图片return <imgsrc={src}onError={this.handleError}alt={alt}srcSet={srcSet}style={{ 'object-fit': fit }}/>}// src 图片的路径// onError 图片异常触发的钩子函数    //srcSet   srcset="image1.jpg 1x, image2.jpg 2x, image3.jpg 3x"//srcSet 属性接受一组逗号分隔的描述符和图像路径    //浏览器会根据设备的像素密度选择合适的图像进行加载,例如在像素密度为2x的设备上,会选择加载 image2.jpg。if (icon) {//如果icon存在 就渲染 传入的iconreturn (<i class={icon} />);}return this.$slots.default;//如果没有传入icon url  就渲染组件的默认插槽 如果组件引用标签内没有包裹东西,就是空的}

代码细节

  • 返回一个html片段
  • 如果传入的src存在就渲染图片 alt 是图片不显示时 显示的文本
  • 如果icon存在,就渲染icon图标
  • 入宫src和icon都不存在就渲染组件的默认插槽
  • this.$slots.default是组件的默认插槽

render函数里的代码

  render() {const { avatarClass, size } = this;//使用解构,获取到avatarClass 和size const sizeStyle = typeof size === 'number' ? {height: `${size}px`,width: `${size}px`,lineHeight: `${size}px`} : {};//如果传入的 size 是number类型的 就直接拼接px形成style对象return (<span class={ avatarClass } style={ sizeStyle }>{this.renderAvatar()}</span>);}

render函数里的代码逻辑

  • 使用解构赋值 获取到组件里的avatarClass(类名)和size(尺寸)
  • 如果size的类型时 number 则使用模板字符串组装 height ,width,lineHeight组成的sizeStyle对象
  • 将 avatarClass 和 sizeStyle 挂载到span上 使类名和 style生效,这种写法非常不错,逻辑和模板分离
  • 最后调用renderAvatar()函数,使得函数中定义的逻辑模板渲染在html中
  • render函数可以替代template实现模板的渲染,并且效率比直接写template更高

全部代码

<script>
export default {name: 'ElAvatar',props: {size: {type: [Number, String],//type validator(val) {// validator 可以是一个函数 返回值是 boolean true表示传入有效,false表示传入的数据格式不对,会提示格式不对if (typeof val === 'string') {return ['large', 'medium', 'small'].includes(val);}return typeof val === 'number';}},shape: {//形状 circle圆形 square 方形 type: String,default: 'circle',validator(val) {return ['circle', 'square'].includes(val);}},icon: String,//传入的图标 iconsrc: String,//传入的路径alt: String,//图片不显示时 显示的替代文本srcSet: String,//是一种响应式网页设计,它允许开发者为图像提供不同大小和分辨率的版本,以便根据设备的屏幕大小和像素密度自动选择最适合的图像进行显示error: Function,//图片加载失败,触发的异常函数fit: {type: String,default: 'contain'}},// object-fit// img标签的图片自适应方案// fill 默认,不保证保持原有的比例,内容拉伸填充整个内容容器。// contain  保持原有尺寸比例。内容被缩放。// cover 保持原有尺寸比例。但部分内容可能被剪切。// none	 保留原有元素内容的长度和宽度,也就是说内容不会被重置。
// scale-down	保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同,取决于它们两个之间谁得到的对象尺寸会更小一些。data() {return {isImageExist: true};},computed: {avatarClass() {// 类名 集合const { size, icon, shape } = this;console.log("size",size)// size avatar 图标的尺寸// icon 图标// shpe形状let classList = ['el-avatar'];// classList 类名 集合if (size && typeof size === 'string') {classList.push(`el-avatar--${size}`);}if (icon) {classList.push('el-avatar--icon');}if (shape) {classList.push(`el-avatar--${shape}`);}// classList.join(" ") 就是将名的数组以空格为连接符拼接到一起return classList.join(' ');}},methods: {handleError() {const { error } = this;const errorFlag = error ? error() : undefined;// 图片类头像加载失败的回调, 返回 false 会关闭组件默认的 fallback 行为if (errorFlag !== false) {this.isImageExist = false;}},renderAvatar() {const { icon, src, alt, isImageExist, srcSet, fit } = this;console.log("=======================",icon, src, alt, isImageExist, srcSet, fit)if (isImageExist && src) {// 图片路径存在,就渲染图片return <imgsrc={src}onError={this.handleError}alt={alt}srcSet={srcSet}style={{ 'object-fit': fit }}/>}// src 图片的路径// onError 图片异常触发的钩子函数    //srcSet   srcset="image1.jpg 1x, image2.jpg 2x, image3.jpg 3x"//srcSet 属性接受一组逗号分隔的描述符和图像路径    //浏览器会根据设备的像素密度选择合适的图像进行加载,例如在像素密度为2x的设备上,会选择加载 image2.jpg。if (icon) {//如果icon存在 就渲染 传入的iconreturn (<i class={icon} />);}return this.$slots.default;//如果没有传入icon url  就渲染组件的默认插槽 如果组件引用标签内没有包裹东西,就是空的}},render() {const { avatarClass, size } = this;//使用解构,获取到avatarClass 和size const sizeStyle = typeof size === 'number' ? {height: `${size}px`,width: `${size}px`,lineHeight: `${size}px`} : {};//如果传入的 size 是number类型的 就直接拼接px形成style对象return (<span class={ avatarClass } style={ sizeStyle }>{this.renderAvatar()}</span>);}};
</script>

这篇关于element ui el-avatar 源码解析零基础逐行解析的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/518925

相关文章

使用Jackson进行JSON生成与解析的新手指南

《使用Jackson进行JSON生成与解析的新手指南》这篇文章主要为大家详细介绍了如何使用Jackson进行JSON生成与解析处理,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 核心依赖2. 基础用法2.1 对象转 jsON(序列化)2.2 JSON 转对象(反序列化)3.

Springboot @Autowired和@Resource的区别解析

《Springboot@Autowired和@Resource的区别解析》@Resource是JDK提供的注解,只是Spring在实现上提供了这个注解的功能支持,本文给大家介绍Springboot@... 目录【一】定义【1】@Autowired【2】@Resource【二】区别【1】包含的属性不同【2】@

SpringCloud动态配置注解@RefreshScope与@Component的深度解析

《SpringCloud动态配置注解@RefreshScope与@Component的深度解析》在现代微服务架构中,动态配置管理是一个关键需求,本文将为大家介绍SpringCloud中相关的注解@Re... 目录引言1. @RefreshScope 的作用与原理1.1 什么是 @RefreshScope1.

Java并发编程必备之Synchronized关键字深入解析

《Java并发编程必备之Synchronized关键字深入解析》本文我们深入探索了Java中的Synchronized关键字,包括其互斥性和可重入性的特性,文章详细介绍了Synchronized的三种... 目录一、前言二、Synchronized关键字2.1 Synchronized的特性1. 互斥2.

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

Python 中的异步与同步深度解析(实践记录)

《Python中的异步与同步深度解析(实践记录)》在Python编程世界里,异步和同步的概念是理解程序执行流程和性能优化的关键,这篇文章将带你深入了解它们的差异,以及阻塞和非阻塞的特性,同时通过实际... 目录python中的异步与同步:深度解析与实践异步与同步的定义异步同步阻塞与非阻塞的概念阻塞非阻塞同步

C#基础之委托详解(Delegate)

《C#基础之委托详解(Delegate)》:本文主要介绍C#基础之委托(Delegate),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 委托定义2. 委托实例化3. 多播委托(Multicast Delegates)4. 委托的用途事件处理回调函数LINQ

Redis中高并发读写性能的深度解析与优化

《Redis中高并发读写性能的深度解析与优化》Redis作为一款高性能的内存数据库,广泛应用于缓存、消息队列、实时统计等场景,本文将深入探讨Redis的读写并发能力,感兴趣的小伙伴可以了解下... 目录引言一、Redis 并发能力概述1.1 Redis 的读写性能1.2 影响 Redis 并发能力的因素二、

Spring MVC使用视图解析的问题解读

《SpringMVC使用视图解析的问题解读》:本文主要介绍SpringMVC使用视图解析的问题解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC使用视图解析1. 会使用视图解析的情况2. 不会使用视图解析的情况总结Spring MVC使用视图