diff --git a/packages/devui-vue/devui/notification/src/notification-icons.tsx b/packages/devui-vue/devui/notification/src/notification-icons.tsx
new file mode 100644
index 0000000000..3e192fb167
--- /dev/null
+++ b/packages/devui-vue/devui/notification/src/notification-icons.tsx
@@ -0,0 +1,92 @@
+export function SuccessIcon(): JSX.Element {
+ return (
+
+ );
+}
+
+export function WarningIcon(): JSX.Element {
+ return (
+
+ );
+}
+
+export function InfoIcon(): JSX.Element {
+ return (
+
+ );
+}
+
+export function ErrorIcon(): JSX.Element {
+ return (
+
+ );
+}
diff --git a/packages/devui-vue/devui/notification/src/notification-image.tsx b/packages/devui-vue/devui/notification/src/notification-image.tsx
index ee44c231e1..5b4d154280 100644
--- a/packages/devui-vue/devui/notification/src/notification-image.tsx
+++ b/packages/devui-vue/devui/notification/src/notification-image.tsx
@@ -1,7 +1,7 @@
import { computed, defineComponent, toRefs } from 'vue';
import type { PropType } from 'vue';
import { NotificationType } from './notification-types';
-import { Icon } from '../../icon';
+import { SuccessIcon, WarningIcon, InfoIcon, ErrorIcon } from './notification-icons';
export default defineComponent({
props: {
@@ -16,13 +16,16 @@ export default defineComponent({
'devui-notification-image': true,
[`devui-notification-image-${type.value}`]: true,
}));
- const severityIconMap = {
- info: 'info-o',
- success: 'right-o',
- warning: 'warning-o',
- error: 'error-o',
- };
- return () => {type.value !== 'normal' && };
+ return () => (
+
+ {type.value &&
+ type.value !== 'normal' &&
+ ((type.value === 'success' && ) ||
+ (type.value === 'info' && ) ||
+ (type.value === 'warning' && ) ||
+ (type.value === 'error' && ))}
+
+ );
},
});
diff --git a/packages/devui-vue/devui/notification/src/notification.scss b/packages/devui-vue/devui/notification/src/notification.scss
index dbea8ca23e..06f0dc24a1 100644
--- a/packages/devui-vue/devui/notification/src/notification.scss
+++ b/packages/devui-vue/devui/notification/src/notification.scss
@@ -68,20 +68,27 @@
padding: 0;
line-height: 1;
- &.devui-notification-image-warn i.icon {
- color: $devui-warning !important;
+ &.devui-notification-image-warning {
+ path.devui-icon-warning-outer {
+ fill: $devui-warning-line;
+ }
+
+ path.devui-icon-warning-inner {
+ fill: $devui-light-text;
+ stroke: $devui-light-text;
+ }
}
- &.devui-notification-image-info i.icon {
- color: $devui-info !important;
+ &.devui-notification-image-info {
+ background-color: $devui-info;
}
- &.devui-notification-image-error i.icon {
- color: $devui-danger !important;
+ &.devui-notification-image-error {
+ background-color: $devui-danger;
}
- &.devui-notification-image-success i.icon {
- color: $devui-success !important;
+ &.devui-notification-image-success {
+ background-color: $devui-success;
}
.devui-notification-image-info-path,
diff --git a/packages/devui-vue/docs/components/notification/index.md b/packages/devui-vue/docs/components/notification/index.md
index 5315fa491c..9605a9fe48 100644
--- a/packages/devui-vue/docs/components/notification/index.md
+++ b/packages/devui-vue/docs/components/notification/index.md
@@ -196,8 +196,8 @@ this.$notificationService.open({ xxx });
### d-notification 参数
-| 参数 | 类型 | 默认 | 说明 | 跳转 |
-| -------- | ------------------ | -------- | -------------------------- | ----------------------------- |
+| 参数名 | 类型 | 默认 | 说明 | 跳转 |
+| :------- | :----------------- | :------- | :------------------------- | :---------------------------- |
| v-model | `boolean` | 'false' | 组件调用必选，控制是否显示 | [组件方式调用](#组件方式调用) |
| content | `string` | '' | 可选，设置消息内容 | [基本用法](#基本用法) |
| title | `string` | '' | 可选，设置消息标题 | [消息标题](#消息标题) |
@@ -207,6 +207,14 @@ this.$notificationService.open({ xxx });
### d-notification 插槽
-| 名称 | 说明 |
-| ------- | ---------------------------- |
+| 插槽名 | 说明 |
+| :------ | :--------------------------- |
| default | 默认插槽，组件方式使用时有效 |
+
+### 类型定义
+
+#### NotificationType
+
+```ts
+type NotificationType = 'normal' | 'success' | 'error' | 'warning' | 'info';
+```