1.element-ui 组件库 button 源码分析
2.Angular 组件库 NG-NEST 源码解析：Button 组件
3.一天一个 Element 组件 - Button
4.一看就会的超实用小组件之LoadingButton

element-ui 组件库 button 源码分析

       团队将基于新的按钮按钮 UI 规范构建组件库，并需实现具备多种主题换肤能力的源码 button 组件。该组件需支持字体颜色、代码背景颜色、按钮按钮边框和禁用状态的源码调整，同时加入一种幽灵按钮类型。代码类似emlog源码分析后，按钮按钮决定不在 element-ui 组件库上进行改造，源码以确保更好的代码维护性。因此，按钮按钮将参考 element-plus 的源码 css 自定义变量实现这一目标。

       深入分析 element-ui 组件库中的代码 button 组件，我们关注到以下几个关键点：

       首先，按钮按钮button 组件提供了丰富的源码新游社区源码属性，如尺寸（size）、代码类型（type）、朴素样式（plain）、圆角（round）、圆形（circle）、加载状态（loading）、禁用（disabled）、图标（icon）以及是否聚焦（autofocus）等，这些属性使按钮组件具有高度的定制性。

       接下来，通过查看相关的文件路径，我们发现组件的逻辑主要集中在 button.vue 文件中。该文件定义了组件的移动小商城源码属性和行为，而其样式逻辑则分散在多个文件中，包括 common/var.scss 和 theme-chalk/src/mixins/mixins.scss 等。

       在 common/var.scss 文件中，定义了一系列公共变量，如主题颜色、字体颜色、字体大小等，这些变量可以通过不同的主题配置实现组件库的换肤。例如，$--color-primary 变量用于定义主要主题颜色。

       为了实现组件的动态换肤，mix 函数被用于将两种颜色按不同比例混合，从而生成新的dw模板源码下载颜色。例如，mix($--color-white, $--color-primary, %) 表示将白色与主要主题颜色按 % 和 % 的比例混合。

       为了遵循 Element 的样式规范，组件库采用了 BEM（Block Element Modifier）命名法来管理样式。在 packages/theme-chalk/src/mixins/mixins.scss 文件中，定义了一系列的函数，如 b()、e() 和 m()，分别用于创建基础类、元素类以及修饰符类。

       在 button.scss 组件样式文件中，我们看到组件库的样式被单独管理，通过 Gulp 打包工具。医美软件源码文件中，@include b(button) 函数用于定义 el-button 类样式，同时考虑了相邻按钮间的间距、按钮大小、内边距、字体大小和边框圆角等参数。当需要定义不同状态的样式时，使用 when 函数来实现，如 when(loading) 用于定义加载状态的样式。

       针对不同的按钮类型（type）、伪类状态和朴素按钮，组件通过覆盖默认的颜色、背景颜色和边框颜色来实现定制化。颜色的浅化通过 mix 函数与白色混合实现。文本按钮、按钮组以及不同的按钮状态都遵循 BEM 规范，通过生成相应的类样式来定义。

       综上所述，通过研究 element-ui 组件库的 button 组件源码，我们深入理解了其设计的巧妙之处。这一过程不仅帮助我们学习了组件库设计的最佳实践，也为我们构建具备高度定制性和维护性的组件库提供了宝贵的启示。

Angular 组件库 NG-NEST 源码解析：Button 组件

       NG-NEST 介绍

       讲解项目源码结构时,我们提过单个组件的文件架构,现在深入解析下 Button 组件内部实现。

       功能分析

       先看 Button 组件能提供的核心功能。

       主题颜色

       设置主题颜色时，我们仅需定义 type 参数。

       参数定义

       type 参数设在 button.property.ts 文件内，用于定义输入参数并指定为 XButtonType 的联合类型，初始值为 "initial"。

       具体定义与使用情况

       在 button.component.ts 文件中，setClassMap() 函数中指定了根据 type 生成的样式属性，并通过 ngClass 映射样式。

       SCSS 样式定义

       参数与样式的关联在 button.component.scss 文件中实现，通过 @include 输出 @mixin 的混入样式。

       @mixin 定义在 style/mixin.scss 内，如 button-type 定义了基于不同参数的不同按钮样式。

       样式复用

       利用 @mixin 实现不同主题颜色样式的便捷复用，提高代码的可维护性和一致性。

       总结

       Button 组件主题颜色功能实现清晰明了：利用 type 参数定义样式名，SCSS 文件中具体定义样式。通过 button.property.ts 和 button.component.ts 文件的协同工作，组件属性清晰明了，便于后续的维护与优化。

       组件属性分离策略提升代码可维护性，且能够自动生成官方 API 文档中的属性说明文档。组件主要围绕样式设计，对主题样式有深入了解的开发者应进一步探索其余功能的详细实现。

一天一个 Element 组件 - Button

       本文深入解析 Element 的 Button 组件。

       获取源码：ElemeFE/element | GitHub，标签：v2..0

       Button 组件文档：Button 按钮

       .vue 文件位置：/packages/button

       .scss 文件位置：/packages/theme-chalk/button.scss

       .d.ts 文件位置：/types/button.d.ts

       el-button 实现基于原生 button 按钮。

       设置 icon 属性时，按钮前显示对应 Icon，支持包裹文字。

       在 computed 内处理 buttonSize 和 buttonDisabled 的逻辑。buttonSize 优先级为：inject 高阶插件/组件库用例，若包裹在 el-form 或 el-form-item 中，可通过 this.elForm 和 this.elFormItem 获取。

       全局尺寸设置 this.$ELEMENT，在入口文件 src/index.ts 中设定。

       buttonDisabled 逻辑参考 buttonSize，优先级同上。

       click 事件逻辑简单，基于 HTML button 元素，用户点击触发原生 click 事件。

       点击 el-button 时，调用 handleClick 函数，触发 el-button 的 click 事件。若赋予了 @click 函数，如示例中的 count++，则该函数将执行。

       CSS 相关源码解读将在后续补充。

一看就会的超实用小组件之LoadingButton

       ç»„件背景

       åœ¨å¹³æ—¶çš„工作中，经常会遇到一个场景：

       ç‚¹å‡»æŒ‰é’®æ—¶è¯·æ±‚一些接口数据，而为了避免用户重复的点击我们通常会为这些按钮添加loading。这个添加loading的功能本身时非常简单的，只要我们定义一个变量使用在Button组件中即可，但在做后台管理类项目时，这样的按钮可能会有非常非常多，可能一个组件中，很多变量都是xxx_loading，耗时耗力又不够优雅。接下来，我们对Button组件做一个简单的封装来解决这个耗时耗力又不够优雅的loading问题

灵感来源

       æˆ‘们在使用Antd的Modal对话框时，当我们的onOk为异步函数时，此时Modal的确定按钮会自动添加loading效果，在函数执行完成后关闭弹窗，就像这样：此时，代码如下：

asyncFunc(){ returnnewPromise(resolve=>{ setTimeout(()=>{ resolve()},)})},handleTestModal(){ constthat=thisthis.$confirm({ title:'测试异步函数',content:'异步函数延迟两秒结束',asynconOk(){ awaitthat.asyncFunc()}})},

       çœ‹åˆ°è¿™ç§æ•ˆæžœåŽï¼Œå°±æƒ³åˆ°ï¼Œå¦‚果可以封装一个Button组件，将需要执行的函数传入，组件中自动根据函数执行情况添加loading效果岂不是非常的方便。

实现LoadingButton定义组件参数

       è¿™è¾¹å°±å®šä¹‰å‡ ä¸ªå¤§å®¶ä¼šå¸¸ç”¨åˆ°çš„参数：text(按钮文字)、type(按钮类型)、asyncFunc(按钮点击时执行的异步函数)、delay(loading延迟)，另外，还需要一个组件内部的loading变量来控制我们Button组件的状态，代码如下：

exportdefault{ data(){ return{ loading:false}},props:{ text:{ type:String,default:'确定'},type:{ type:String,default:'primary'},delay:{ type:Number,default:0},asyncFunc:{ type:Function,default:()=>{ }}},}使用antd中的Button组件进行二次封装

       åœ¨æˆ‘们的自定义LoadingButton组件中，将上面定义的参数使用起来，并绑定一个click事件，代码如下：

<template><Button:type="type":loading="loading"@click="handleClick">{ { text}}</Button></template><script>import{ Button}from'ant-design-vue'exportdefault{ components:{ Button},methods:{ handleClick(){ }}}</script>判断异步函数asyncFunc

       è¿™ä¸€éƒ¨åˆ†ä¸ºæ•´ä¸ªç»„件最重要的一个部分，即我们如何去判断传入的函数是异步函数，当我们传入的asyncFunc函数是异步函数时，组件才需要添加loading的动画，那么我们应该如何去判断一个函数是否为异步函数呢？

参考antd是如何实现的？

       ä¸Šé¢æˆ‘们刚介绍了antd的Modal对话框中有类似的逻辑，那么不妨去阅读一下这部分相关的源码，看下antd的实现方式：

//components/modal/ActionButton.jsxonClick(){ const{ actionFn,closeModal}=this;if(actionFn){ letret;if(actionFn.length){ ret=actionFn(closeModal);}else{ ret=actionFn();if(!ret){ closeModal();}}if(ret&&ret.then){ this.setState({ loading:true});ret.then((...args)=>{ //It'sunnecessarytosetloading=false,fortheModalwillbeunmountedafterclose.//this.setState({ loading:false});closeModal(...args);},e=>{ //Emiterrorwhencatchpromisereject//eslint-disable-next-lineno-consoleconsole.error(e);//See:/post/