easy-antd-modal
Version:
二次开发, 简化 Ant Design Modal 的使用方式
105 lines (67 loc) • 3.56 kB
Markdown
# easy-antd-modal
<!-- SHIELD GROUP -->
[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![install size][npm-size]][npm-size-url]
[![Test CI status][test-ci]][test-ci-url] [![Deploy CI][release-ci]][release-ci-url] [![Coverage][coverage]][codecov-url]
[![contributors][contributors-shield]][contributors-url] [![forks][forks-shield]][forks-url] [![stargazers][stargazers-shield]][stargazers-url] [![issues][issues-shield]][issues-url]
[![docs by dumi][dumi-url]](https://d.umijs.org/) [![Build With father][father-url]](https://github.com/umijs/father/)
<!-- umi url -->
[dumi-url]: https://img.shields.io/badge/docs%20by-dumi-blue
[father-url]: https://img.shields.io/badge/build%20with-father-028fe4.svg
<!-- npm url -->
[npm-image]: http://img.shields.io/npm/v/easy-antd-modal.svg?style=flat-square&color=deepgreen&label=latest
[npm-url]: http://npmjs.org/package/easy-antd-modal
[npm-size]: https://img.shields.io/bundlephobia/minzip/easy-antd-modal?color=deepgreen&label=gizpped%20size&style=flat-square
[npm-size-url]: https://packagephobia.com/result?p=easy-antd-modal
<!-- coverage -->
[coverage]: https://codecov.io/gh/Wxh16144/easy-antd-modal/branch/master/graph/badge.svg
[codecov-url]: https://codecov.io/gh/Wxh16144/easy-antd-modal/branch/master
<!-- Github CI -->
[test-ci]: https://github.com/Wxh16144/easy-antd-modal/workflows/Test%20CI/badge.svg
[release-ci]: https://github.com/Wxh16144/easy-antd-modal/workflows/Release%20CI/badge.svg
[test-ci-url]: https://github.com/Wxh16144/easy-antd-modal/actions?query=workflow%3ATest%20CI
[release-ci-url]: https://github.com/Wxh16144/easy-antd-modal/actions?query=workflow%3ARelease%20CI
[download-image]: https://img.shields.io/npm/dm/easy-antd-modal.svg?style=flat-square
[download-url]: https://npmjs.org/package/easy-antd-modal
## 简介
基于 Ant Design 的 Modal 组件的二次封装,简化了 Modal 的使用方式
- 支持 antd4.x 和 antd5.x, API 保持一致
- 自动绑定打开事件, 无需维护 open 状态
- content 增强, 支持内部手动关闭
- 支持拖拽, 类 window 窗口
- 可直接对接 antd-mobile 的 Mask, Modal, Popup, Dialog 组件
- 长期维护 (欢迎 PR)
## 快速上手
### 安装
推荐使用 `pnpm` 安装
```bash
pnpm i easy-antd-modal -S
```
### 使用
```tsx | pure
import { Button } from 'antd';
import Modal from 'easy-antd-modal';
export default () => (
<Modal title="easy-antd-modal" trigger={<Button type="primary">Click Me</Button>}>
I ❤️ antd
</Modal>
);
```
## 迭代记录
详情:[CHANGELOG](./CHANGELOG.md)
## License
Copyright © 2023 - present [Wxh16144][profile-url]. <br />
This project is [MIT](./LICENSE) licensed.
<!-- LINK GROUP -->
[profile-url]: https://github.com/Wxh16144
<!-- contributors -->
[contributors-shield]: https://img.shields.io/github/contributors/Wxh16144/easy-antd-modal.svg?style=flat
[contributors-url]: https://github.com/Wxh16144/easy-antd-modal/graphs/contributors
<!-- forks -->
[forks-shield]: https://img.shields.io/github/forks/Wxh16144/easy-antd-modal.svg?style=flat
[forks-url]: https://github.com/Wxh16144/easy-antd-modal/network/members
<!-- stargazers -->
[stargazers-shield]: https://img.shields.io/github/stars/Wxh16144/easy-antd-modal.svg?style=flat
[stargazers-url]: https://github.com/Wxh16144/easy-antd-modal/stargazers
<!-- issues -->
[issues-shield]: https://img.shields.io/github/issues/Wxh16144/easy-antd-modal.svg?style=flat
[issues-url]: https://github.com/Wxh16144/easy-antd-modal/issues/new/choose