自定义弹出层

时间：2023-04-05 01:05:47 HTML5

无文档流后台web端日常开发经常会遇到各种弹出层需求，弹出层内容千奇百怪。根据我们日常的组件开发经验，我们会将弹出层分为2个组件。弹出层组件：包含遮罩，显示隐藏逻辑内容组件：这个需求的实际组件使用importCitySelectfrom'./components/CitySelect';从'@/components/modal'导入模态；...openCitySelect(){模态。popup({content:CitySelect,props:{data,onSave:()=>{...}}});}..这种用法的好处是很明显调用者和CitySelect不需要维护一个可见的变量。调用者和CitySelect模块之间的分离更加清晰。调用者只需要触发一次openCitySelect，之后与弹出层无关。CitySelect只关心它自己的逻辑不需要关心炸弹层的状态。下面看看这个api在vue和react上的实现。这个api在Vue下有很多种实现方式。可以使用dom操作、动态组件、render函数来实现。我们以动态组件为例：React实现React实现需要配合react-dom，rn，可以通过在app入口添加常驻弹窗容器来实现。原理大致相同。比如代码是直接从ant复制过来的。//弹窗组件classPopupextendsComponent{componentDidMount(){}render(){const{close,props={},visible=false,}=this.props;如果（！可见）{返回空；}constDlgContent=内容；return(

)}}//方法constpopup=function(config){constdiv=document.createElement('div');文档.body.appendChild(div);让currentConfig={...配置，可见：真，关闭};functionclose(...args){currentConfig={...currentConfig,visible:false};渲染（当前配置）；设置超时（销毁，100）；}functiondestroy(){constunmountResult=ReactDOM.unmountComponentAtNode(div);如果（卸载结果&&div.parentNode){div.parentNode.removeChild(div);}}functionrender(config){ReactDOM.render(,div);}渲染（当前配置）；返回{销毁：关闭};};constmodal={popup};导出默认模态；注意，由于弹窗是手动新建的，并没有包含在入口的jsx引用中，所以像router、store、locale这样的provider需要手动重新封装，这样相关的功能才能像page一样使用