yt-base-modal

基于 antd 4 的自定义 Modal 组件,供其他 React 项目复用。

环境要求

消费方项目需自行提供以下 peerDependencies:

• react@^17.0.0
• react-dom@^17.0.0
• antd@^4.22.0
• @ant-design/icons@^4.7.0

安装

npm install yt-base-modal

使用

样式需要手动引入一次(全局生效,任意入口文件引一次即可):

import { BaseModal } from 'yt-base-modal';
import 'yt-base-modal/dist/style.css'; // 引入一次即可

function Demo() {
  const [visible, setVisible] = React.useState(false);
  return (
    <>
      <button onClick={() => setVisible(true)}>打开</button>
      <BaseModal
        visible={visible}
        onCancel={() => setVisible(false)}
        title="标题"
        isEnableMove        // 标题栏可拖拽
        isEnableFullScreen  // 显示最大化按钮
      >
        <div>内容</div>
      </BaseModal>
    </>
  );
}

BaseModal 在 antd Modal 基础上扩展了拖拽移动、全屏切换等能力,其余 props 透传给 antd Modal。

BaseModalContext

在 BaseModal 的子组件中,可通过 BaseModalContext 获取 Modal 状态与操作方法(全屏状态、头/尾高度、切换全屏、关闭):

import { BaseModal, BaseModalContext } from 'yt-base-modal';
import { useContext } from 'react';

function Content() {
  const {
    isFullScreen,           // 当前是否全屏
    baseModalHeaderHeight,  // 头部高度
    baseModalFooterHeight,  // 底部高度
    toggleFullScreen,       // 切换全屏
    toggleClose,            // 关闭 Modal(即 onCancel)
  } = useContext(BaseModalContext);

  return <div style={{ height: `calc(100% - ${baseModalHeaderHeight}px)` }}>...</div>;
}

样式说明

组件 JS 产物是纯 JS、不 import 任何样式,样式由预编译好的 dist/style.css 单独提供。这样消费方无需配置 less,普通打包器都能处理 .css,引入一次即可。

类名均带 yt-base-modal- 前缀,如需覆盖样式可直接写同名选择器,或 import 'yt-base-modal/es/BaseModal/BaseModal.less' 复用 less 源文件(需 less 能力)。

产物格式

| 路径 | 格式 | 用途 | | ----------------- | ---- | ---------------------------- | | es/ | ESM | 现代打包器,tree-shaking 友好 | | lib/ | CJS | Node / 旧打包器 | | dist/*.min.js | UMD | <script> 直接引用 | | dist/style.css | CSS | 组件样式,需手动引入一次 |

开发

npm run dev        # 监听构建(JS)
npm run build      # 产出 es/ lib/ dist/ + dist/style.css
npm run build:css  # 仅重新编译 less → dist/style.css
npm run doctor     # 发布前体检