前言本文是作者撰写的关于组件设计的第六篇文章。许多复杂组件的必要方法之一。通过组件设计的过程，你将接触到一个完整的、健壮的组件设计思想和方法，在实现组件的过程中逐渐深入了解react/vue的高级知识和技能并掌握，并做到在企业实际工作中游刃有余。之所以写组件设计相关的文章，是因为作为一名优秀的前端工程师，面对各种繁琐重复的工作，我们不应该“一步步“辛苦”劳动”，而是要总结出一套基于现有前端开发经验的高效开发方式，作为数据驱动的领导者，react/vue等MVVM框架的出现，帮助我们在工作中减少了很多冗余代码，万物皆组件的理念很流行，为了让工程师有更多时间考虑业务和产品迭代，我们必须掌握优质组件设计的思路和方法。所以笔者会花时间总结各种业务场景的设计思路和方法以下组件，并使用原生框架的语法实现各种常用组件的开发，希望能让前端新手或者有一定工作经验的朋友有所收获。如果你是不熟悉react/vue组件设计原理的可以，可以参考我之前的组件设计系列文章：《精通react/vue组件设计》5分钟实现一个Tag（标签）组件和Empty（空状态）组件《精通react/vue组件设计》使用纯css制作类似materialUI的按钮点击动画并封装成为react组件《精通react/vue组件设计》快速实现可自定义的进度条组件《精通react/vue组件设计》基于jsoneditor二次封装，可实时预览的json编辑器组件（react版）。在开始组件设计之前，希望大家对css3和js有一定的基础，了解基本的react/vue语法。我们先来看看实现。最终的组件效果：1.组件设计思路根据笔者之前总结的组件设计原则，我们第一步是确认需求。一个抽屉（Drawer）组件会有如下需求：可以控制抽屉是否可见，可以手动配置抽屉关闭按钮可以控制抽屉打开的方向，抽屉关闭时是否销毁里面的子元素（这个问题在工作中经常遇到）。指定抽屉挂载的HTML节点，抽屉可以挂载在任意元素上。点击遮罩层可以控制抽屉是否允许关闭可以控制遮罩层的显示可以自定义抽屉弹出层的样式可以设置抽屉弹出层的宽度可以控制弹出的层级-up层可以控制抽屉的弹出方向（上、下、左、右）当关闭按钮被点击时，可以提供回调给开发者执行相关操作需求收集后，作为一个有抱负的人程序员，你会得到如下线框图：对于react玩家，如果你不会使用typescript，建议大家使用PropTypes，它是react中内置的类型检测工具。我们可以直接将其导入到项目中。Vue有自己的属性检测方法，这里就不一一介绍了。通过上面的需求分析，你是不是觉得一个抽屉组件实现这么多功能是不是很复杂？确实有点复杂，不过不用怕，有了上面精准的需求分析，我们只需要一步步实现功能点即可。对于我们常用的表格组件，模态组件等，我们还需要考虑很多的使用场景和功能点，比如antd的表格组件暴露的属性就有几十个，如果不明确具体的需求，它实现这样的组件很麻烦。接下来我们来看一下具体的实现。2、基于react2.1实现一个Drawer组件。抽屉组件框架设计首先我们先按照需求写组件框架，这样后面业务逻辑会更清晰：importPropTypesfrom'prop-types'importstylesfrom'./index.less'/***Drawer抽屉组件*@param{visible}bool抽屉是否可见*@param{closable}bool右上角是否显示关闭按钮*@param{destroyOnClose}bool关闭时销毁*@param{getContainer}HTMLElement里面的子元素指定Drawer挂载的HTML节点，false表示挂载在当前dom上*@param{maskClosable}bool是否允许点击关闭抽屉mask*@param{mask}bool是否显示遮罩Cover*@param{drawerStyle}对象用于设置抽屉弹出层样式*@param{width}number|string弹出层宽度*@param{zIndex}number弹出层层级*@param{placement}string抽屉方向*@param{onClose}string回调*/functionDrawer(props){const{closable=true,destroyOnClose,getContainer=document.body,maskClosable=true,mask=true,drawerStyle,width='300px',zIndex=10,placement='right',onClose,children}=propsconstchildDom=(
