antd + react model自定义footer_精通react/vue组件设计之用React Portals实现功能强大的抽屉(Drawer)组件...

antd + react model自定义footer_精通react/vue组件设计之用React Portals实现功能强大的抽屉(Drawer)组件..._第1张图片

前言

本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一. 通过组件的设计过程,大家会接触到一个完成健壮的组件设计思路和方法,也能在实现组件的过程逐渐对react/vue的高级知识和技巧有更深的理解和掌握,并且在企业实际工作做游刃有余.

之所以会写组件设计相关的文章,是因为作为一名前端优秀的前端工程师,面对各种繁琐而重复的工作,我们不应该按部就班的去"辛勤劳动",而是要根据已有前端的开发经验,总结出一套自己的高效开发的方法.

作为数据驱动的领导者react/vue等MVVM框架的出现,帮我们减少了工作中大量的冗余代码, 一切皆组件的思想深得人心. 为了让工程师们有更多的时间去考虑业务和产品迭代,我们不得不掌握高质量组件设计的思路和方法.所以笔者将花时间去总结各种业务场景下的组件的设计思路和方法,并用原生框架的语法去实现各种常用组件的开发,希望能让前端新手或者有一定工作经验的朋友能有所收获.

如果对于react/vue组件设计原理不熟悉的,可以参考我的之前写的组件设计系列文章.

正文

在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先看看实现后的组件效果:

antd + react model自定义footer_精通react/vue组件设计之用React Portals实现功能强大的抽屉(Drawer)组件..._第2张图片

1. 组件设计思路

按照之前笔者总结的组件设计原则,我们第一步是要确认需求. 一个抽屉(Drawer)组件会有如下需求点:

  • 能控制抽屉是否可见
  • 能手动配置抽屉的关闭按钮
  • 能控制抽屉的打开方向
  • 关闭抽屉时是否销毁里面的子元素(这个问题是工作中频繁遇到的问题)
  • 指定 Drawer 挂载的 HTML 节点, 可以将抽屉挂载在任何元素上
  • 点击蒙层可以控制是否允许关闭抽屉
  • 能控制遮罩层的展示
  • 能自定义抽屉弹出层样式
  • 可以设置抽屉弹出层宽度
  • 能控制弹出层层级
  • 能控制抽屉弹出方向(上下左右)
  • 点击关闭按钮时能提供回调供开发者进行相关操作

需求收集好之后,作为一个有追求的程序员, 会得出如下线框图:

你可能感兴趣的:(antd,+,react,model自定义footer,react,div,onclick叠加,vue取div当前宽度,vue实现div多选全选功能)