diff --git a/src/notify/Notify.tsx b/src/notify/Notify.tsx
index f6dc6d400..770b8544d 100644
--- a/src/notify/Notify.tsx
+++ b/src/notify/Notify.tsx
@@ -1,5 +1,5 @@
import { createNamespace } from '../utils';
-import { RED, WHITE } from '../utils/constant';
+import { WHITE } from '../utils/constant';
import { inherit } from '../utils/functional';
import { PopupMixin } from '../mixins/popup';
import Popup from '../popup';
@@ -10,6 +10,7 @@ import { DefaultSlots } from '../utils/types';
import { PopupMixinProps } from '../mixins/popup/type';
export type NotifyProps = PopupMixinProps & {
+ type: 'primary' | 'success' | 'danger' | 'warning';
color: string;
message: string | number;
duration: number;
@@ -37,7 +38,7 @@ function Notify(
position="top"
overlay={false}
lockScroll={false}
- class={[bem(), props.className]}
+ class={[bem([props.type]), props.className]}
{...inherit(ctx, true)}
>
{props.message}
@@ -47,17 +48,18 @@ function Notify(
Notify.props = {
...PopupMixin.props,
+ background: String,
className: null as any,
message: [Number, String],
getContainer: [String, Function],
+ type: {
+ type: String,
+ default: 'danger'
+ },
color: {
type: String,
default: WHITE
},
- background: {
- type: String,
- default: RED
- },
duration: {
type: Number,
default: 3000
diff --git a/src/notify/README.md b/src/notify/README.md
index 0a669f010..0e7d5dcfd 100644
--- a/src/notify/README.md
+++ b/src/notify/README.md
@@ -17,13 +17,27 @@ Vue.use(Notify);
Notify('Notify Message');
```
-### Custom Config
+### Notify Type
+
+```js
+Notify({ type: 'primary', message: 'Notify Message' });
+Notify({ type: 'success', message: 'Notify Message' });
+Notify({ type: 'danger', message: 'Notify Message' });
+Notify({ type: 'warning', message: 'Notify Message' });
+```
+
+### Custom Notify
```js
Notify({
- message: 'Notify Message',
- duration: 1000,
- background: '#1989fa'
+ message: 'Custom Color',
+ color: '#ad0000',
+ background: '#ffe1e1'
+});
+
+Notify({
+ message: 'Custom Duration',
+ duration: 1000
});
```
@@ -54,6 +68,7 @@ export default {
| Attribute | Description | Type | Default |
|------|------|------|------|
+| type | Can be set to `primary` `info` `warning` | `string` | `danger` |
| message | Message | `string` | - |
| duration | Duration(ms), won't disappear if value is 0 | `number` | `3000` |
| color | Message color | `string` | `#fff` | |
diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md
index d1e6a1d62..142623e48 100644
--- a/src/notify/README.zh-CN.md
+++ b/src/notify/README.zh-CN.md
@@ -17,13 +17,38 @@ Vue.use(Notify);
Notify('通知内容');
```
-### 自定义配置
+### 通知类型
+
+支持`primary`、`success`、`warning`、`danger`四种通知类型，默认为`danger`
+
+```js
+// 主要通知
+Notify({ type: 'primary', message: '通知内容' });
+
+// 成功通知
+Notify({ type: 'success', message: '通知内容' });
+
+// 危险通知
+Notify({ type: 'danger', message: '通知内容' });
+
+// 警告通知
+Notify({ type: 'warning', message: '通知内容' });
+```
+
+### 自定义通知
+
+自定义消息通知的颜色和展示时长
```js
Notify({
- message: '通知内容',
- duration: 1000,
- background: '#1989fa'
+ message: '自定义颜色',
+ color: '#ad0000',
+ background: '#ffe1e1'
+});
+
+Notify({
+ message: '自定义时长',
+ duration: 1000
});
```
@@ -54,6 +79,7 @@ export default {
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|------|------|------|------|------|
+| type | 类型，可选值为 `primary` `info` `warning` | `string` | `danger` | 2.1.6 |
| message | 展示文案，支持通过`\n`换行 | `string` | - | - |
| duration | 展示时长(ms)，值为 0 时，notify 不会消失 | `number` | `3000` | - |
| color | 字体颜色 | `string` | `#fff` | - |
diff --git a/src/notify/demo/index.vue b/src/notify/demo/index.vue
index bce76c71e..a91f1e111 100644
--- a/src/notify/demo/index.vue
+++ b/src/notify/demo/index.vue
@@ -1,19 +1,22 @@
-
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -22,16 +25,26 @@
export default {
i18n: {
'zh-CN': {
+ primary: '主要通知',
+ success: '成功通知',
+ danger: '危险通知',
+ warning: '警告通知',
content: '通知内容',
- customConfig: '自定义配置',
- showNotify: '显示消息通知',
- showCustomNotify: '显示自定义消息通知'
+ notifyType: '通知类型',
+ customColor: '自定义颜色',
+ customNotify: '自定义配置',
+ customDuration: '自定义时长'
},
'en-US': {
+ primary: 'Primary',
+ success: 'Success',
+ danger: 'Danger',
+ warning: 'Warning',
content: 'Notify Message',
- customConfig: 'Custom Config',
- showNotify: 'Show Notify',
- showCustomNotify: 'Show Custom Notify'
+ notifyType: 'Notify Type',
+ customColor: 'Custom Color',
+ customNotify: 'Custom Notify',
+ customDuration: 'Custom Duration'
}
},
@@ -40,11 +53,25 @@ export default {
this.$notify(this.$t('content'));
},
- showCustomNotify() {
+ showCustomColor() {
+ this.$notify({
+ message: this.$t('customColor'),
+ color: '#ad0000',
+ background: '#ffe1e1'
+ });
+ },
+
+ showCustomDuration() {
+ this.$notify({
+ message: this.$t('customDuration'),
+ duration: 1000
+ });
+ },
+
+ showType(type) {
this.$notify({
message: this.$t('content'),
- duration: 1000,
- background: '#1989fa'
+ type
});
}
}
@@ -52,7 +79,7 @@ export default {