正常情况下:
- <Dialog
- visible={visible}
- style={{ height: '590px' }}
- width={840}
- onCancel={onCloseHandler}
- onClose={onCloseHandler}
- onOk={handleSubmit}
- noFooterLine
- destroyOnClose
- noHeadLine
- title={
- <div>
- <p>{getLocale('Rep_NewS_Evaluation')}p>
- <span className="titleDesc">{getLocale('Rep_NewS_ComhenRatin')}span>
- div>
- }
- onClose={onCloseHandler}
- />
1.当图片不能在该组件铺满的时候,给图片加一个display:block。
2.当不需要取消和确定按钮,noFooter 或者加上 footer=""
3.当不需要上边的title栏的时候,noHeader 或者加上 header="",需要的时候则加上header={},并且{}里可以写
4.当不需要右上方的关闭按钮的时候,加上noCloseIcon,
5.也可以额外加上新的className:extraClass = [],
6.可以不把要展示的内容写在><之间。可以写成以下的格式。
- modalRender={() => (
- <div className={`${prefixCls}__content`}>
- <button
- className="close-btn tu-icon-close"
- onClick={onCloseDialog}
- />
-
- <button className="confirm-btn">
- <img
- className="animate-rubberBand"
- onClick={onOrderControllerClick}
- src={require("../../img/advertisement-btn-en.png")}
- alt="立即预约"
- />
- button>
- div>
- )}
7.也可以加上动画animation="slide-fade"
8.destroyOnClose :这个属性就是说在Dialog关闭的时候可以把元素清除,下次打开的时候重新渲染,那样表单填的数据就也会被清空掉。
9.forceRender: 该属性用于控制对话框是否强制渲染。当 forceRender 设置为 true 时,无论对话框是否可见,都会将对话框内容进行渲染。这意味着即使对话框没有显示出来,其内容也会被渲染并存在于 DOM 中。而当 forceRender 设置为 false 或未设置时,则对话框只有在可见时才会进行渲染。这可以提高性能,避免不必要的渲染。需要注意的是,如果对话框内部包含有动态内容或受到其他因素影响的组件,可能需要将 forceRender 设置为 true,以确保内容正常渲染和更新。但同时要考虑到潜在的性能影响。