qdialog不允许放大缩小弹窗_react 可拖动可放大缩小弹窗组件即拿即用

前言

根据要求自制一款可拖动可最大化的弹窗组件效果如下：

放大效果如下：

废话不说。

首先获得当前页面的宽、高和初始窗口坐标，并水平垂直居中：

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事