element-ui avatar 组件源码分享

2024-04-02 19:04

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

 今日简单分享 avatar 组件的源码实现,主要从以下四个方面:

1、avatar 组件页面结构

2、avatar 组件属性

3、avatar 组件事件

4、avatar 组件 slot

一、avatar 组件页面结构

二、avatar 组件属性

2.1 icon 属性,设置头像的图标类型,参考 Icon 组件,类型 string,无默认值。

组件使用及展示效果如下:

2.2 size 属性,设置头像的大小,类型 number/string,number / large / medium / small,默认 large。

2.3 shape 属性,设置头像的形状,类型 string,circle / square,默认 circle。

2.4 src 属性,图片头像的资源地址,类型 string,无默认值。

2.5 srcSet 属性,以逗号分隔的一个或多个字符串列表表明一系列用户代理使用的可能的图像,类型 string,无默认值。

srcSet 作用是:针对于不同的屏幕设置不同尺寸的图片。

参考链接:<img>:图像嵌入元素 - HTML(超文本标记语言) | MDN

2.6 alt 属性,描述图像的替换文本,类型 string,无默认值。

2.7 fit 属性,当展示类型为图片的时候,设置图片如何适应容器框,类型 string,fill / contain / cover / none / scale-down,默认 cover。

图片 object-fit 参考链接:object-fit - CSS:层叠样式表 | MDN

三、avatar 组件事件

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

使用及展示效果:

四、avatar 组件 slot

4.1 default 挂载,自定义头像展示内容。

这篇关于element-ui avatar 组件源码分享的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

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

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

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

Python解析器安装指南分享(Mac/Windows/Linux)

《Python解析器安装指南分享(Mac/Windows/Linux)》:本文主要介绍Python解析器安装指南(Mac/Windows/Linux),具有很好的参考价值,希望对大家有所帮助,如有... 目NMNkN录1js. 安装包下载1.1 python 下载官网2.核心安装方式3. MACOS 系统安

Spring 中 BeanFactoryPostProcessor 的作用和示例源码分析

《Spring中BeanFactoryPostProcessor的作用和示例源码分析》Spring的BeanFactoryPostProcessor是容器初始化的扩展接口,允许在Bean实例化前... 目录一、概览1. 核心定位2. 核心功能详解3. 关键特性二、Spring 内置的 BeanFactory

Spring组件初始化扩展点BeanPostProcessor的作用详解

《Spring组件初始化扩展点BeanPostProcessor的作用详解》本文通过实战案例和常见应用场景详细介绍了BeanPostProcessor的使用,并强调了其在Spring扩展中的重要性,感... 目录一、概述二、BeanPostProcessor的作用三、核心方法解析1、postProcessB

kotlin中的行为组件及高级用法

《kotlin中的行为组件及高级用法》Jetpack中的四大行为组件:WorkManager、DataBinding、Coroutines和Lifecycle,分别解决了后台任务调度、数据驱动UI、异... 目录WorkManager工作原理最佳实践Data Binding工作原理进阶技巧Coroutine

Java嵌套for循环优化方案分享

《Java嵌套for循环优化方案分享》介绍了Java中嵌套for循环的优化方法,包括减少循环次数、合并循环、使用更高效的数据结构、并行处理、预处理和缓存、算法优化、尽量减少对象创建以及本地变量优化,通... 目录Java 嵌套 for 循环优化方案1. 减少循环次数2. 合并循环3. 使用更高效的数据结构4

Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)

《Vue项目的甘特图组件之dhtmlx-gantt使用教程和实现效果展示(推荐)》文章介绍了如何使用dhtmlx-gantt组件来实现公司的甘特图需求,并提供了一个简单的Vue组件示例,文章还分享了一... 目录一、首先 npm 安装插件二、创建一个vue组件三、业务页面内 引用自定义组件:四、dhtmlx

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Python中常用的四种取整方式分享

《Python中常用的四种取整方式分享》在数据处理和数值计算中,取整操作是非常常见的需求,Python提供了多种取整方式,本文为大家整理了四种常用的方法,希望对大家有所帮助... 目录引言向零取整(Truncate)向下取整(Floor)向上取整(Ceil)四舍五入(Round)四种取整方式的对比综合示例应