对antd中的Modal框进行水平垂直居中的css写法
在宽高已知的情况下：

  margin-top: -280px; // 高的一半
  top: 50%; // 高的一半
  left: 50%;  // 宽的一半
  margin-left: -429px; // 宽的一半
 :package: 安装
yarn add ant-design-draggable-modal
 注意：您必须使用[email protected]和[email protected]或更高版本。
 :hammer: 用法
import React , { useState , useCallback } from 'react'
import { Button } from 'antd'
import { DraggableModal , DraggableModalProvider } from
补充知识：react中使用antd的表单重置数据
resetFields 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 Function([names: string[]])
注：initialValue有值时会
				
antd-modal-dragable
在蚂蚁金服的antd库的modal组件上，新增可拖动功能，完全复用antd-modal的全部api，支持同时打开多个窗口
新增以下三个api
1.dragable
类型boolean,是否可拖动，默认true,开启此项后，首次位置水平方向不再居中，要手动设置初始位置
2.limit
类型boolean,是否限制不能移出屏幕，默认false
3.autoIndex
类型boolean,是否自动置顶，点击窗口时此窗口置于最高层，开启此项时，mask会失效，新打开的窗口会自动置顶
下载库中的Modal.js，放到自己的项目中，此文件依赖antd，如未安装antd，则无法使用该组件
				
注：该组件本身自带的居中显示：当缩小窗口，其宽度比modal小的时候会掉下去，上面留有一段空白，是因为before的高度问题引起
this.modalService.create({
          nzContent: ModalTellDetailComponent,
          nzWrapClassName: 'centerModal',
          nzFooter: null,
          nzMaskClosable: false,
import React from "react";
import {Card, Button, Modal} from "antd";
import './ui.less'
// × 和 cancel 是同一个事件
export default cla...
npm install
npm run server
npm run build   发布  npm install  webpack-cli --save-dev  配置环境变量  cross-env
工作中发现我们在做react后台管理系统的时候，会有大量重复的页面（如下图），比如form表单和table组件、以及接口通讯，新增修改modal等。虽然antd里面的组件已经很简便了，但是遇到众多功能类似的页面，每次都复制大量的代码还是会耗费很大的时间而且不易维护，看起来很不清爽，于是找了个时间就把他们做了二次封装。 尽量涵盖了大多数的业务。
form表单的README.md、请查看README.Form.md
table表格的README.md、请查看README.Table.md
Modal的README.md、请查看RE
下面将代码附录如下：希望以后可以达到自行封装代码的程度：
感觉同事的代码跟大神https://www.cnblogs.com/mankii/p/13970970.html 的代码一致，大神就是大神，超级厉害！！！
1.封装拖动弹窗组件——index.vue
1.1html部分代码
<template>
	<a-modal :class="[modalClass,simpleClass]" :visible="visible" v-bind
				
最近几个月在做一个react的项目，项目做到了百分之八十，然后业务要求项目里面的模态框可以拖拽，呵呵，早不提，晚不提，偏偏现在提，尽管我心里骂了一万遍，可是还是只能老老实实搞啊，毕竟谁叫人家是上帝，吾等凡人只能任其宰割，不说了，说多了都是泪！
项目用的ui框架是antd-design,相信开发过react项目的都对它不陌生，几乎是react项目首选的ui库，毕竟阿里出厂，质量保证，但是坑爹的是它的...
				
最近因为业务需求需要将ant-d model框设置为可拖拽组件，但因为ant-d 以及pro都没用可拖拽api所以自己用原生dom简单封装了一个
import React from "react";
import {Modal} from "antd";
// 可控长度的随机数拼接时间戳成产唯一id
const createUniqID = length=>Number(Math.random().toString().substr(3,length) + Date.now()).toString(3
import * as React from 'react';
import Dialog from 'rc-dialog';
import classNames from 'classnames';
import CloseOutlined from '@ant-design/icons/CloseOutlined';
import { getConfirmLocale } from './locale';
import Button from '..
				
<Flex direction="column" justify="center" style={{height: "100%"}}>
	<Flex justify="center">
		114514
	</Flex>
</Flex>
使用两个Flex，一个竖着居中（高度100%或者100vh），一个横着居中
				
项目中需求，模态框只保留一个确定按钮，去掉取消按钮。
官方文档中只写了去掉全部的脚部按钮，:footer设置为null，这个补不满足需求，在多查找资料解决了此问题
在slot插槽中，重新定义按钮
代码如下：
 <a-modal :title="title"
           :width="950"
           okText="确定"
           cancelText="取消"
           :visible="visible"
           @cancel
import React from 'react';
import { Modal } from 'antd';
import Draggable from 'react-draggable';
class DraggableModal extends React.Component {
  render() {
    return (
      <Draggable>
        <Modal {...this.props} />
      </Draggable>
最后，使用DraggableModal组件替换antd的Modal组件即可：
```jsx
<DraggableModal
  title="Basic Modal"
  visible={this.state.visible}
  onOk={this.handleOk}
  onCancel={this.handleCancel}
  <p>Some contents...</p>
  <p>Some contents...</p>
  <p>Some contents...</p>
</DraggableModal>
这样就可以实现antd Modal的拖动功能了。