皮皮网

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

一看就会的超实用小组件之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/

一天一个 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，源码支持包裹文字。源码易语言520表白源码

       在 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 函数，android工控界面源码如示例中的 count++，则该函数将执行。

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

element-ui 组件库 button 源码分析

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

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

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

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

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

       为了实现组件的动态换肤，mix 函数被用于将两种颜色按不同比例混合，从而生成新的颜色。例如，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 组件源码，我们深入理解了其设计的巧妙之处。这一过程不仅帮助我们学习了组件库设计的最佳实践，也为我们构建具备高度定制性和维护性的组件库提供了宝贵的启示。