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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/234702.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

阿里lindorm与MyBatis Plus集成

lindorm与MyBatis Plus集成 1 添加依赖&#xff1a; 在项目的pom.xml文件中添加lindorm和MyBatis Plus的依赖。 <dependencies><dependency><groupId>com.alibaba</groupId><artifactId>lindorm-jdbc</artifactId><version>1.1.1…

机器学习笔记:支持向量机回归SVR

1 主要思想 主要思路类似于机器学习笔记&#xff1a;支持向量机SVM_支撑向量学习-CSDN博客 和SVM的区别主要有 解法和SVM区别不大&#xff0c;也是KKT 2 和线性回归的区别 对SVR&#xff0c;如果f(x)和y之间的差距小于阈值ε【也即落在两条间隔带之间】&#xff0c;则不计算…

SQL面试题挑战03:奖金瓜分问题(拼多多)

目录 问题&#xff1a;SQL解答&#xff1a; 问题&#xff1a; 在活动大促中&#xff0c;有玩游戏瓜分奖金环节。现有奖金池为10000元&#xff0c;代表奖金池中的初始额度。用户的分数信息如下&#xff1a; user_id score 100 60 101 45 102 40 103 3…

模拟组建网络的过程

DNS是域名系统&#xff0c;作用是将域名解析成ip地址 要求 1.使用172.16.0.0网段组建网络 2.使用3台pc&#xff0c;可以配置DHCP服务自动分配ip 3.添加两个网站服务器 第一台是www.taobao.com 第二台www.jd.com 他们可以通过DNS服务器为客户解析域名 172开头的是B类ip地…

标准库中的string类(上)——“C++”

各位CSDN的uu们好呀&#xff0c;好久没有更新小雅兰的C专栏的知识啦&#xff0c;接下来一段时间&#xff0c;小雅兰就又会开始更新C这方面的知识点啦&#xff0c;以及期末复习的一些知识点&#xff0c;下面&#xff0c;让我们进入西嘎嘎string的世界吧&#xff01;&#xff01;…

【论文简述】High-frequency Stereo Matching Network(CVPR 2023)

一、论文简述 1. 第一作者&#xff1a;Haoliang Zhao 2. 发表年份&#xff1a;2023 3. 发表期刊&#xff1a;CVPR 4. 关键词&#xff1a;立体匹配、MVS、深度学习、高频信息、LSTM 5. 探索动机&#xff1a;(1)当涉及到估计的视差图的更精细的特征时&#xff0c;大多数当前…

Java反序列化工具ysoserial使用

ysoserial是一款用于生成 利用不安全的Java对象反序列化 的有效负载的概念验证工具。 项目地址 https://github.com/frohoff/ysoserial主要有两种使用方式&#xff0c;一种是运行ysoserial.jar 中的主类函数&#xff0c;另一种是运行ysoserial中的exploit 类&#xff0c;二者…

蓝桥杯-每日刷题-023

统计字符 一、题目要求 题目描述 给出一个字符串&#xff0c;统计其中的英文字母、空格、数字的个数。输入格式 输入一行&#xff0c;为给定字符串输出格式 输出参考样例。输入样例 aaaaaa 11111 2223www输出样例 letter9 space2 digit9 二、完整代码 #include <iostrea…

未来十年,人工智能就业方向及前景如何?

人工智能&#xff08;AI&#xff09;是一个快速发展的领域&#xff0c;对于未来的就业方向和前景有着巨大的影响。以下是一些可能的发展趋势和就业前景&#xff1a; 1、增长趋势&#xff1a;人工智能正在全球范围内经历巨大的增长&#xff0c;预计在未来十年内将继续保持这一趋…

一个正则快速找到在ES中使用profile的时产生慢查询的分片

在es中使用profile分析慢查询的时候&#xff0c;往往因为分片过多&#xff0c;或者因为查询条件太复杂&#xff0c;分析的结果几十万行。在kibana上点半天&#xff0c;也找不到一个耗时长的分片。 kibana上可以通过正则来匹配。其实我们只需要匹配到耗时大于10秒的请求。 检索语…

connect信号槽的异步性导致多线程中的数据被更改及Qt::BlockingQueuedConnection作用

目录 1. 问题现象 2. 原因分析 3. 解决方法 1. 问题现象 因为业务需求&#xff0c;需要利用子线程向主线程发送数据。像这种子线程和主线程进行数据交互时&#xff0c;一般都是通过Qt的信号槽机制来实现。如下代码&#xff1a; void myClass::doBusiness() {…

0x42 树状数组

0x42 树状数组 若一个正整数 x x x的二进制表示为 a k − 1 a k − 2 . . . a 2 a 1 a 0 a_{k-1}a_{k-2}...a_2a_1a_0 ak−1​ak−2​...a2​a1​a0​&#xff0c;其中等于1的位是 { a i 1 , a i 2 , . . . , a i m } \{a_{i_1},a_{i_2},...,a_{i_{m}}\} {ai1​​,ai2​​,...…

鸿蒙原生应用再添新丁!喜马拉雅入局鸿蒙

鸿蒙原生应用再添新丁&#xff01;喜马拉雅入局鸿蒙 来自 HarmonyOS 微博12月20日消息&#xff0c; #喜马拉雅正式完成鸿蒙原生应用版本适配#&#xff0c;作为音频业巨头的喜马拉雅 &#xff0c;将基于#HarmonyOS NEXT#创造更丰富、更智慧的全场景“声音宇宙”&#xff01;#鸿…

Python 正则表达式入门:轻松掌握字符串匹配的艺术

Python 正则表达式入门&#xff1a;轻松掌握字符串匹配的艺术 引言&#xff1a;什么是正则表达式&#xff1f;基础知识&#xff1a;正则表达式的语法和规则Python中的正则表达式&#xff1a;re模块的使用实战应用&#xff1a;常见的正则表达式案例最佳实践与常见错误结语&#…

python+selenium+HTMLTestRunner生成测试报告并发送邮件给指定邮箱

配置邮件发送人及接收人&#xff0c;并执行测试用例&#xff0c;最后发送测试报告到指定邮箱&#xff08;注意&#xff1a;打开测试报告目录后&#xff0c;最后记得关闭&#xff0c;不然邮箱接收到的测试报告内容将会为空&#xff09; import time import unittest import os …

格密码:LWE设计公钥密码系统

目录 一. LWE公私钥对 二. 怎么加密&#xff1f; 三. 怎么解密&#xff1f; 四. 正确性分析 五. 安全性 在格密码中&#xff0c;LWE(Learning With Errors)问题非常重要&#xff0c;本文章将介绍一些基于LWE设计的公钥密码方案&#xff0c;并详细讨论这些方案是如何运行的…

oracle怎样才算开启了内存大页?

oracle怎样才算开启了内存大页&#xff1f; 关键核查下面三点&#xff1a; 1./etc/sysctl.conf vm.nr_hugepages16384这是给了32G&#xff0c;计划sga给30G&#xff0c;一般需多分配2-4G sysctl -p生效 看cat /proc/meminfo|grep Huge啥结果&#xff1f; 这种明显是配了…

蓝牙物联网开发与应用:五大核心应用场景!

蓝牙技术在物联网中的五大核心应用场景 1、智能家居 通过蓝牙连接智能家居设备&#xff0c;如智能灯泡、智能插座、智能恒温器等&#xff0c;可以实现远程控制、语音控制等功能&#xff0c;提高家居的智能化程度和便利性。 2、智能穿戴设备 蓝牙技术可以连接智能手表、智能手…

01AVue入门(持续学习中)

1.使用AVue开发简单的前端页面直接简单到起飞,他是Element PlusVueVite开发的,不需要向元素的前端代码一样一个组件要传很多参数,他可以使用Json文本来控制我们要传入的数据结构来决定显示什么 //我使用的比较新,我们也可以使用cdn直接使用script标签直接引入 2.开发中遇到的坑…

共享目录搭建

【linux系统】 1.sudo yum install nfs-utils 或 sudo apt install nfs-common 问题&#xff1a;如果apt install nfs-common报错dpkg: error processing package rpcbind (--configure) 解决方法&#xff1a;删除所有信息之后update sudo mv/var/lib/dpkg/info/ /va…