前言
根据要求自制一款可拖动可最大化的弹窗组件效果如下:
放大效果如下:
废话不说。
首先获得当前页面的宽、高和初始窗口坐标,并水平垂直居中:
InitWindow=()=>{
// 初始化窗口在当前页面的正中
const {pageHeight,PageWidth}=this.state;
let WindowX=document.body.clientWidth ;
let WindowY=document.body.clientHeight;
let pageX=WindowX/2-PageWidth/2;
let pageY=WindowY/2-pageHeight/2;
this.WindowWi=WindowX;//页面的宽、高
this.WindowHi=WindowY;
this.DefpageX=pageX;//初始坐标
this.DefpageY=pageY;
this.setState({pageX,pageY});
}
能够修改窗口状态有:宽、高和横纵坐标,所以要先预想。正文如下:
标题
{this.props.children}
取消
确定
所有的动作都是由鼠标按下开始,并出发鼠标移动、鼠标按键up事