基于Ant-design的可以拖拽的Modal
基于Ant-design的可以拖拽的Modal
特性:
支持弹出窗居中打开
支持拖拽 title bar 实现拖拽
支持多层弹窗拖拽
安装:
$ yarn add antd-draggable-modal
用法:
import React, { Component } from 'react';
import { Button } from 'antd';
import AntdDraggableModal from 'antd-draggable-modal';
class Index extends Component {
state = {
visible: false,
visible2: false,
}
handleVisible = visible => {
this.setState({
visible,
});
}
handleOk = () => {
this.handleVisible(false);
}
handleCancel = () => {
this.handleVisible(false);
}
render() {
return (
<>
this.handleVisible(true)}>打开弹窗
{this.state.visible && (
title="Basic Modal"
visible={this.state.visible}
onOk={this.handleOk}
onCancel={this.handleCancel}
>
Some contents...
Some contents...
Some contents...
this.setState({ visible2: true })}>打开弹窗2
)}
{this.state.visible2 && (
title="Basic Modal2"
visible={this.state.visible2}
onOk={() => this.setState({ visible2: false })}
onCancel={() => this.setState({ visible2: false })}
>
Some contents...
Some contents...
Some contents...
)}
>
);
}
}
export default Index;
Current Tags
0.1.7 ... latest (a year ago)
8 Versions
0.1.7 ... a year ago
0.1.6 ... a year ago
0.1.5 ... a year ago
0.1.4 ... a year ago
0.1.3 ... a year ago
0.1.2 ... a year ago
0.1.1 ... a year ago
0.1.0 ... a year ago