美文网首页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