antd的Modal可移动(可拖拽)
2020-05-20 本文已影响0人
木头木头我是木头
通过第三方插件实现
https://www.npmjs.com/package/dragm
使用方法:
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>
)
}
}