Text在开始组件设计之前，希望大家有一定的css3和js基础，了解基本的react/vue语法。先来看看实现的组件效果：1.组件设计思路根据笔者之前总结的组件设计原则，我们第一步是确认需求。一个抽屉（Drawer）组件会有如下需求：可以控制抽屉是否可见可以手动配置抽屉的关闭按钮控制抽屉的打开方向抽屉关闭时是否销毁里面的子元素（这个问题是工作中经常遇到的）指定Drawer挂载的HTML节点，可以将drawer挂载到任意元素上点击mask控制是否允许关闭drawer时可以控制mask层的显示。您可以自定义抽屉弹出层的样式。您可以设置抽屉弹出层的宽度。您可以控制弹出层级别。可以控制抽屉的弹出方向（上、下、左、右）。当点击关闭按钮时，可以提供回调给开发者进行相关操作。收藏之后，作为一个有抱负的程序员，你会得到如下线框图：对于react玩家，如果你不会使用typescript，建议大家使用PropTypes，它是react中内置的类型检测工具，我们可以直接在项目中导入。Vue有自己的属性检测方式，这里就不一一介绍了。通过上面的需求分析，你是不是觉得一个抽屉组件实现这么多功能是不是很复杂？确实有点复杂，但是不用怕，有了上面的精准需求分析，我们只需要根据功能点一步步实现即可。对于我们常用的表格组件、模态组件等，我们也需要考虑很多的使用场景和功能点。比如antd的table组件，暴露了几十个，如果不明确具体需求，实现这样的组件是很麻烦的。接下来，我们来看一下具体的实现。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时关闭drawer*@param{mask}bool是否显示遮罩*@param{drawerStyle}对象用于设置抽屉弹出层样式*@param{width}number|string弹出层宽度*@param{zIndex}numberpop-uplayerlevel*@param{placement}stringdrawerdirection*@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=(
