使用react-rnd实现一个可以拖拽和拉伸的弹框组件。

通过react-rnd实现一个可以拖拽和拉伸的弹框组件。

react-rnd的使用

---

一、react-rnd是什么？

react-rnd 是一个React 组件库，可以提供一个可调整大小与可拖拽的组件。

二、使用步骤

1.安装

代码如下（示例）：

npm install react-rnd

2.封装一个弹框组件

代码如下（示例）：

import React, { useState } from 'react'
import { Rnd } from 'react-rnd';
import '../App.css'

export default function Model({isopen,isclose,children}) {
  const [isDragging, setIsDragging] = useState(false);
    
  if(!isopen) return null;
  
  return (
    <div className='zg'>
      <Rnd
        default={{
          x: 380,
          y: 150,
          width: 400,
          height: 260,
        }}
        minWidth={210}
        minHeight={400}
        bounds="window"
        onDragStart={() => setIsDragging(true)}
        onDragStop={() => setIsDragging(false)}
        onResizeStart={() => setIsDragging(true)}
        onResizeStop={() => setIsDragging(false)}
        style={{ opacity: isDragging ? 0.8 : 1 }}
        onClick={(e) => e.stopPropagation()}
      >
          <div className='main'>
            <div className='title'>XX模块</div>
              <button onClick={()=>{
                  isclose()
              }}>关闭</button>

              <div>{children}</div>
          </div>
      </Rnd>
        
    </div>
  )
}

---

3.组件的css样式

注意：包裹的元素，不能设置固定的宽高，否则，不能进行拉伸。

.main{
  height: 100%;
  width: 100%;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  margin: auto;
  background-color: #fff;
}
.title{
  background-color: #5377b6;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-weight: 600;
}
.zg{
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.21);
  position: fixed;
  top: 0;
}

4.父组件中使用这个弹窗组件。

最后，你可以在一个父组件中使用这个弹窗组件，例如App.js

import React, { useState } from 'react'
import {addcar} from './store/modules/car'
import Model from './components/Model'

export default function App() {
  const [isModelopen,setopen] = useState(false)
  
  return (
    <div>
      <button onClick={()=>{
        setopen(true)
      }}>打开</button>
      <Model isopen={isModelopen} isclose={()=>{
        setopen(false)
      }}>
            1111
      </Model>
    </div>
  )
}