React

antd的Modal可移动(可拖拽)

2020-05-20  本文已影响0人  木头木头我是木头

通过第三方插件实现

https://www.npmjs.com/package/dragm

使用方法:

  1. npm install dragm -S

2.安装后运行如果出现缺少.less,则在命令行>yarn install(或直接运行 yarn),然后再运行

3.新建一个文件ModalDrag.js

import DragM from 'dragm';
export default class ModalDrag extends React.Component {
  updateTransform = transformStr => {
    this.modalDom.style.transform = transformStr;
  };
  componentDidMount() {
    this.modalDom = document.getElementsByClassName(
      "ant-modal-wrap"  // modal的class是ant-modal-wrap
    )[0];
  }
  render() {
    const { title } = this.props;
    return (
      <DragM updateTransform={this.updateTransform}>
        <div>{title}</div>
      </DragM>
    );
  }
}

4.这样拖拽组件就封装好了,在其他组件中引入这个文件

import ModalDrag from './ModalDrag .js';
class Demonstration extends React.Component {
    render(){
        const title = <ModalDrag title="标题” />
        return(
            <Modal
                title={title}
            >
            </Modal>
        )
    }
}
上一篇 下一篇

猜你喜欢

热点阅读