在前端开发中，弹窗（pop）是常见的交互组件。在此，介绍一下 @beisen/common-pop 的使用教程。
1. 前置知识
- npm 的基础使用方法
- React 的基础语法
2. 安装
npm install @beisen/common-pop
3. 引入
import CommonPop from '@beisen/common-pop';
4. 使用
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ --------- ---- ---------------------
-------- ----- -
----- --------- ----------- - ----------------
------ -
-----
------- ----------- -- -----------------------------
----------
----------
-----------------
----------- -- ------------------
-
-------------
------------
------
--
-5. API
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | - |
| visible | 是否显示弹窗 | boolean | false |
| onClose | 关闭时的回调函数 | () => void | - |
| children | 弹窗内容 | React.Node | - |
| footer | 弹窗底部内容 | React.Node | null |
| width | 弹窗宽度 | number | 520 |
| zIndex | 弹窗层级 | number | 1000 |
| mask | 是否显示遮罩层 | boolean | true |
| maskClosable | 是否点击遮罩层可关闭弹窗 | boolean | false |
| placement | 弹窗位置，可选值：topLeft/top/topRight/bottomRight/bottom/bottomLeft | string | 'bottom' |
6. 实现原理
@beisen/common-pop 的实现原理是基于 antd 的 Modal 组件，封装了一层以便更好的适用于 B 端开发。使用方法和 antd 的 Modal 组件基本一致，只是做了一些常见的设置，如遮罩层的关闭、弹窗位置等。同时，在弹窗底部加入了一个 button 组件作为提交按钮，以提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabe9b5cbfe1ea06108cc