fix: the useMessage icon style problem

This commit is contained in:
vben 2020-10-27 23:58:44 +08:00
parent 8f5016e3f3
commit a2c413a838
5 changed files with 11 additions and 3 deletions

View File

@ -27,6 +27,7 @@
- 修复热更新时多次注册组件警告问题
- 修复登录后出现登录标签页
- 修复路由切换参数消失问题
- 修复 useMessage 图标样式问题
## 2.0.0-rc.5 (2020-10-26)

View File

@ -27,6 +27,10 @@
color: @error-color !important;
}
.modal-icon-info {
color: @primary-color !important;
}
.ant-modal-mask {
background-color: rgba(0, 0, 0, 0.2);
}

View File

@ -87,6 +87,6 @@ export interface MessageOptions {
offset?: number;
}
export interface ModalOptionsEx extends Omit<ModalOptions, 'iconType'> {
iconType: 'warning' | 'success' | 'error';
iconType: 'warning' | 'success' | 'error' | 'info';
}
export type ModalOptionsPartial = Partial<ModalOptionsEx> & Pick<ModalOptionsEx, 'content'>;

View File

@ -13,6 +13,8 @@ function getIcon(iconType: string) {
return <InfoCircleFilled class="modal-icon-warning" />;
} else if (iconType === 'success') {
return <CheckCircleFilled class="modal-icon-success" />;
} else if (iconType === 'info') {
return <InfoCircleFilled class="modal-icon-info" />;
} else {
return <CloseCircleFilled class="modal-icon-error" />;
}
@ -49,7 +51,7 @@ function createModalOptions(options: ModalOptionsPartial, icon: string): ModalOp
};
}
function createSuccessModal(options: ModalOptionsPartial) {
return Modal.success(createModalOptions(options, 'check'));
return Modal.success(createModalOptions(options, 'success'));
}
function createErrorModal(options: ModalOptionsPartial) {
return Modal.error(createModalOptions(options, 'close'));
@ -58,7 +60,7 @@ function createInfoModal(options: ModalOptionsPartial) {
return Modal.info(createModalOptions(options, 'info'));
}
function createWarningModal(options: ModalOptionsPartial) {
return Modal.warning(createModalOptions(options, 'info'));
return Modal.warning(createModalOptions(options, 'warning'));
}
notification.config({

View File

@ -13,6 +13,7 @@
</CollapseContainer>
<CollapseContainer class="px-20 bg-white w-full h-32 rounded-md mt-5" title="Comfirm">
<a-button @click="handleConfirm('info')" class="mr-2">Info</a-button>
<a-button @click="handleConfirm('warning')" color="warning" class="mr-2">Warning</a-button>
<a-button @click="handleConfirm('success')" color="success" class="mr-2">Success</a-button>
<a-button @click="handleConfirm('error')" color="error" class="mr-2">Error</a-button>