Element2组件源码剖析之Progress进度条
发布网友
发布时间：2024-10-03 17:02
共1个回答
热心网友
时间：2024-11-08 04:42
组件Progress用于展示操作进度，告知用户当前状态和预期。本文将深入分析源码，剖析其实现原理，耐心读完，相信会对您有所帮助。packages/progress/src/progress.vue?文件是组件源码实现。。?组件文档Progress??gitee源码?progress.vue?
更多组件剖析详见???Element2源码剖析组件总览。
0x01组件源码template模板内容模板创建一个?<div>?元素根节点，class名为el-result，包含4个子节点自定义图标、自定义标题、自定义二级标题、自定义底部额外区域。
每个节点都提供了各自具名slot,在向具名插槽提供内容的时候需要指明slot#name，否则内容无法正确分发，将被丢弃（未提供匿名插槽）。
<template><divclass="el-result"><!--自定义图标sloticon--><divclass="el-result__icon"><slotname="icon"><component:is="iconElement":class="iconElement"/></slot></div><!--自定义标题slottitle--><divv-if="title||$slots.title"class="el-result__title"><slotname="title"><p>{{title}}</p></slot></div><!--自定义二级标题slotsubTitle--><divv-if="subTitle||$slots.subTitle"class="el-result__subtitle"><slotname="subTitle"><p>{{subTitle}}</p></slot></div><!--自定义底部额外区域slotextra--><divv-if="$slots.extra"class="el-result__extra"><slotname="extra"></slot></div></div></template>自定义图标该节点是一个class名为el-result__icon的<div>?元素包，裹着名为icon的具名slot。
插槽提供了后备内容，动态引用svg图标组件。具体详见下文章节动态组件。
自定义标题该节点是一个class名为el-result__title的<div>?元素包，裹着名为title的具名slot。
只有在title?是truthy或者向该插槽提供内容时，该节点才会被渲染。若两者都设置了（传入title值而且向该插槽提供内容），展示内容为插槽分发内容优先级较高。因为title是做为插槽的后备内容。
truthy（真值）指的是在布尔值上下文中，转换后的值为真的值。所有值都是真值，除非它们被定义为?假值（即除?false、0、""、null、undefined?和?NaN?以外皆为真值）
自定义二级标题该节点是一个class名为el-result__subtitle的<div>?元素包，裹着名为title的具名subTitle。
只有在subTitle?是truthy或者向该插槽提供内容时，该节点才会被渲染。若两者都设置了（传入subTitle值而且向该插槽提供内容），展示内容为插槽分发内容优先级较高。因为subTitle是做为插槽的后备内容。
自定义底部额外区域该节点是一个class名为el-result__extra的<div>?元素包，裹着名为extra的具名slot。只有向该插槽提供内容时v-if="$slots.extra"，该节点才会被渲染。
动态组件上文名为icon的具名slot的后备内容使用了动态组件,根据传入不同的图标类型icon，动态引入对应类型svg图标组件。
通过Vue的?<component>?元素加一个特殊的?is?attribute来实现在不同组件之间进行动态切换。
<component:is="iconElement":class="iconElement"/>svg组件引入注册。
<script>importIconSuccessfrom'./icon-success.vue';importIconErrorfrom'./icon-error.vue';importIconWarningfrom'./icon-warning.vue';importIconInfofrom'./icon-info.vue';exportdefault{components:{[IconSuccess.name]:IconSuccess,[IconError.name]:IconError,[IconWarning.name]:IconWarning,[IconInfo.name]:IconInfo},};</script>计算属性计算属性iconElement根据传入icon值动态生成图标名称。用于组件引用和class添加。
constIconMap={success:'icon-success',warning:'icon-warning',error:'icon-error',info:'icon-info'};exportdefault{//...computed:{iconElement(){consticon=this.icon;returnicon&&IconMap[icon]?IconMap[icon]:'icon-info';}}};根据IconMap定义，若传入的icon值不是success/warning/info/error其中一个，返回默认值icon-info等同于icon值为info。
iconElement值范围为?icon-success,icon-warning,icon-error,icon-info。
svg样式iconElement值?icon-success、icon-warning、icon-error、icon-info会用于svg图标颜色的自定义。不同类型的class定义了不同的颜色，效果如下：
attributes属性组件定义了3个prop:title、subTitle、icon。
props:{title:{type:String,default:''},subTitle:{type:String,default:''},icon:{type:String,default:'info'}},title设置标题内容,默认值为''。具体功能详见上文章节?自定义标题。
subTitle设置二级标题内容,默认值为''。具体功能详见上文章节自定义二级标题。
icon图标类型设置,用于引入指定类型的svg图标、设置图标颜色。具体功能详见上文章节计算属性。
0x03组件样式src/result.scss组件样式源码packages\theme-chalk\src\result.scss使用混合指令b、e?嵌套生成组件样式。
//生成.el-result@includeb(result){//...//生成.el-result__iconsvg@includee(icon){svg{//...}}//生成.el-result__title@includee(title){//...//生成.el-result__titlepp{//...}}//生成.el-result__subtitle@includee(subtitle){//...//生成.el-result__subtitlepp{//...}}//生成.el-result__extra@includee(extra){//...}//生成.el-result.icon-success.icon-success{//...}//生成.el-result.icon-error.icon-error{//...}//生成.el-result.icon-info.icon-info{//...}//生成.el-result.icon-warning.icon-warning{//...}}lib/result.scss前文可知使用gulpfile.js编译scss文件转换为CSS,经过浏览器兼容、格式压缩，最后生成packages\theme-chalk\lib\result.scss，内容格式如下。
.el-result{//...}.el-result__iconsvg{//...}.el-result__title{//...}.el-result__titlep{//...}.el-result__subtitle{//...}.el-result__subtitlep{//...}.el-result__extra{//...}.el-result.icon-success{//...}.el-result.icon-error{//...}.el-result.icon-info{//...}.el-result.icon-warning{//...}0x04?参考"动态组件",vuejs.org\"viewBox""
