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

2023-12-21 00:44

本文主要是介绍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/518105

相关文章

Golang HashMap实现原理解析

《GolangHashMap实现原理解析》HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持高效的插入、查找和删除操作,:本文主要介绍GolangH... 目录HashMap是一种基于哈希表实现的键值对存储结构,它通过哈希函数将键映射到数组的索引位置,支持

Python使用getopt处理命令行参数示例解析(最佳实践)

《Python使用getopt处理命令行参数示例解析(最佳实践)》getopt模块是Python标准库中一个简单但强大的命令行参数处理工具,它特别适合那些需要快速实现基本命令行参数解析的场景,或者需要... 目录为什么需要处理命令行参数?getopt模块基础实际应用示例与其他参数处理方式的比较常见问http

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

java解析jwt中的payload的用法

《java解析jwt中的payload的用法》:本文主要介绍java解析jwt中的payload的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Java解析jwt中的payload1. 使用 jjwt 库步骤 1:添加依赖步骤 2:解析 JWT2. 使用 N

Python中__init__方法使用的深度解析

《Python中__init__方法使用的深度解析》在Python的面向对象编程(OOP)体系中,__init__方法如同建造房屋时的奠基仪式——它定义了对象诞生时的初始状态,下面我们就来深入了解下_... 目录一、__init__的基因图谱二、初始化过程的魔法时刻继承链中的初始化顺序self参数的奥秘默认

Java 正则表达式URL 匹配与源码全解析

《Java正则表达式URL匹配与源码全解析》在Web应用开发中,我们经常需要对URL进行格式验证,今天我们结合Java的Pattern和Matcher类,深入理解正则表达式在实际应用中... 目录1.正则表达式分解:2. 添加域名匹配 (2)3. 添加路径和查询参数匹配 (3) 4. 最终优化版本5.设计思

Android Mainline基础简介

《AndroidMainline基础简介》AndroidMainline是通过模块化更新Android核心组件的框架,可能提高安全性,本文给大家介绍AndroidMainline基础简介,感兴趣的朋... 目录关键要点什么是 android Mainline?Android Mainline 的工作原理关键

使用Java将DOCX文档解析为Markdown文档的代码实现

《使用Java将DOCX文档解析为Markdown文档的代码实现》在现代文档处理中,Markdown(MD)因其简洁的语法和良好的可读性,逐渐成为开发者、技术写作者和内容创作者的首选格式,然而,许多文... 目录引言1. 工具和库介绍2. 安装依赖库3. 使用Apache POI解析DOCX文档4. 将解析

Java字符串处理全解析(String、StringBuilder与StringBuffer)

《Java字符串处理全解析(String、StringBuilder与StringBuffer)》:本文主要介绍Java字符串处理全解析(String、StringBuilder与StringBu... 目录Java字符串处理全解析:String、StringBuilder与StringBuffer一、St