网站建设捌金手指花总三,中企动力科技股份有限公司重庆分公司,开发个app需要多少钱?,公司黄页是指什么意思文章目录 前言Dialog公共弹窗组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言
今天这篇主要讲全局公共弹窗Dialog组件封装#xff0c;将用到上篇封装的模态框Modal组件。有时在前台项目中#xff0c;偶尔要用到一两个常用的组件#xff0c;如 弹窗#x… 文章目录 前言Dialog公共弹窗组件1. 功能分析2. 代码详细注释3. 使用方式4. 效果展示 总结 前言
今天这篇主要讲全局公共弹窗Dialog组件封装将用到上篇封装的模态框Modal组件。有时在前台项目中偶尔要用到一两个常用的组件如 弹窗其实不必非安装ant-design这些主流框架大可自定义封装一个而无需引入额外依赖 提高自己的封装能力。 Dialog公共弹窗组件
1. 功能分析 1通用的弹框组件用于展示一些信息或执行一些操作 3组件使用 Modal 组件来展示模态框并在内部渲染了一个包含头部、内容和底部的弹框容器 4头部包含了标题和关闭按钮内容显示了 children 属性底部包含了一个按钮用于执行确定操作 5组件使用了 classNames 库来合并样式类名并且使用了 styles 模块中的样式类名来设置弹框的样式 2. 代码详细注释
// /components/Dialog/index.tsx
import React from react;
import classNames from classnames;
import styles from ./index.module.scss;
import Modal from /components/Modal;
import Button from /components/Button;// 定义组件的Props类型
type Props {// 是否显示模态框show: boolean;// 模态框标题title: string;// 模态框内容children: React.ReactNode;// 确定按钮文本doneText: string;// 点击确定按钮的回调函数onDoneClick: () void;// 点击关闭按钮的回调函数onClose: () void;// 可选的自定义类名className?: string;
};// 定义一个函数组件用于展示通用的模态框组件
export default (props: Props) {// 解构Props对象中的属性const { title, show, onClose, children, className, doneText, onDoneClick } props;// 返回一个包含模态框的JSX元素return (Modal show{show} onClose{onClose}{/* 模态框容器 */}div className{classNames(styles.modalContainer, className)}{/* 模态框头部 */}div className{classNames(styles.modalHead)}span className{classNames(styles.modalTitle)}{title}/spani className{${classNames(styles.modalClose)} iconfont icon-close} onClick{onClose}/i/div{/* 模态框内容 */}div className{classNames(styles.modalContent)}{children}/div{/* 模态框底部 */}div className{classNames(styles.modalFooter)}{/* 确定按钮 */}Button text{doneText} onClick{onDoneClick}/Button/div/div/Modal);
};
------------------------------------------------------------------------------
// /components/Dialog/index.module.scss
.modalContainer {padding: 20px;.modalHead {display: flex;align-items: center;width: 200px;background: #ffffff;border-radius: 8px 8px 0 0;position: relative;.modalTitle {color: rgba(0, 0, 0, 0.88);font-weight: 600;font-size: 16px;word-wrap: break-word;}.modalClose {position: absolute;right: -6px;font-size: 24px;color: rgba(0, 0, 0, 0.75);cursor: pointer;}}.modalContent {padding: 40px 0;font-size: 14px;word-wrap: break-word;}
}3. 使用方式
// 引入组件
import Dialog from /pages/components/commonDialog;
// 使用
Dialog title切换语言 doneText确定 show{languageModalVisible} onClose{handlerSwitchLanguage} onDoneClick{handlerSwitchLanguage}div style{{ padding: 20px }}这是一个公共弹框/div
/Dialog4. 效果展示 总结
下一篇讲【全局常用组件Text封装】。关注本栏目将实时更新。
