美文网首页React
antd的Modal可移动(可拖拽)

antd的Modal可移动(可拖拽)

作者: 木头木头我是木头 | 来源:发表于2020-05-20 11:05 被阅读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>
        )
    }
}

相关文章

网友评论

    本文标题:antd的Modal可移动(可拖拽)

    本文链接:https://www.haomeiwen.com/subject/flsgohtx.html