说明

• 一个类似浏览器窗口的可移动模态框（拖拽头部进行移动），支持放大和缩小以及关闭
• 基于react的drag合成事件做的，项目中react版本大于16.9.0
• 具体使用如下所示

安装

npm i desk-modal-drag 或 yarn add desk-modal-drag

使用

• 在任意组件中进行使用，isShow控制显示和隐藏，width与height控制模态框大小，这部分是必须传的
• 传入的title可以显示模态框的标题，这部分是可选的
• 然后在模态框组件内编写你需要的内容

import './App.css';
import React,{useState} from 'react';
import DragDesk from 'desk-modal-drag'

function App() {
  const [isShow,setIsShow] = useState(false)
  function showDesk(){
    setIsShow(true)
  }
  function closeDesk(){
    setIsShow(false)
  }

  return (
    <div className="App">
      <button onClick={showDesk}>点击显示</button>
      
      <DragDesk title="组件标题" isShow={isShow} onClose={closeDesk} width="80vw" height="80vh">
        <div>组件内容</div>
      </DragDesk>
    </div>
  );
}

export default App;

效果展示：