diff --git a/example/pages/notify/index.js b/example/pages/notify/index.js
index 7413587a..cf55e1f8 100644
--- a/example/pages/notify/index.js
+++ b/example/pages/notify/index.js
@@ -21,6 +21,14 @@ Page({
});
},
+ showNotifyByType(event) {
+ const { type } = event.currentTarget.dataset;
+ Notify({
+ type,
+ message: '通知内容'
+ });
+ },
+
onClickLeft() {
wx.navigateBack();
}
diff --git a/example/pages/notify/index.wxml b/example/pages/notify/index.wxml
index 97144c63..f01a9bcf 100644
--- a/example/pages/notify/index.wxml
+++ b/example/pages/notify/index.wxml
@@ -9,6 +9,17 @@
基础用法
+
+
+ 主要通知
+ 成功通知
+
+
+ 危险通知
+ 警告通知
+
+
+
自定义颜色
自定义时长
diff --git a/packages/common/style/var.less b/packages/common/style/var.less
index 2a8249ad..bc240043 100644
--- a/packages/common/style/var.less
+++ b/packages/common/style/var.less
@@ -96,6 +96,10 @@
@notify-padding: 6px 15px;
@notify-font-size: 14px;
@notify-line-height: 20px;
+@notify-primary-background-color: @blue;
+@notify-success-background-color: @green;
+@notify-danger-background-color: @red;
+@notify-warning-background-color: @orange;
// Overlay
@overlay-background-color: rgba(0, 0, 0, 0.7);
diff --git a/packages/notify/README.md b/packages/notify/README.md
index b3e07910..7d00cbee 100644
--- a/packages/notify/README.md
+++ b/packages/notify/README.md
@@ -24,6 +24,24 @@ Notify('通知内容');
```
+### 通知类型
+
+支持`primary`、`success`、`warning`、`danger`四种通知类型,默认为`danger`
+
+```js
+// 主要通知
+Notify({ type: 'primary', message: '通知内容' });
+
+// 成功通知
+Notify({ type: 'success', message: '通知内容' });
+
+// 危险通知
+Notify({ type: 'danger', message: '通知内容' });
+
+// 警告通知
+Notify({ type: 'warning', message: '通知内容' });
+```
+
### 自定义通知
自定义消息通知的颜色和展示时长
@@ -62,10 +80,14 @@ Notify({
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|-----------|-----------|-----------|-------------|-------------|
+| type | 类型,可选值为 `primary` `info` `warning` | *string* | `danger` | - |
| message | 展示文案 | *string* | - | - |
| duration | 持续时间 | *number* | `3000` | - |
| selector | 自定义节点选择器 | *string* | `van-notify` | - |
| color | 字体颜色 | *string* | `#fff` | - |
-| background | 背景色 | *string* | `#ee0a24` | - |
+| background | 背景色 | *string* | - | - |
| context | 选择器的选择范围,可以传入自定义组件的 this 作为上下文 | *object* | 当前页面 | - |
| safe-area-inset-top | 是否留出顶部安全距离(状态栏高度) | *boolean* | `false` | - |
+| onClick | 点击时的回调函数 | *Function* | - | - |
+| onOpened | 完全展示后的回调函数 | *Function* | - | - |
+| onClose | 关闭时的回调函数 | *Function* | - | - |
diff --git a/packages/notify/index.less b/packages/notify/index.less
index a8477930..fee4b844 100644
--- a/packages/notify/index.less
+++ b/packages/notify/index.less
@@ -14,4 +14,20 @@
&__safe-top {
height: @nav-bar-height;
}
+
+ &--primary {
+ background-color: @notify-primary-background-color;
+ }
+
+ &--success {
+ background-color: @notify-success-background-color;
+ }
+
+ &--danger {
+ background-color: @notify-danger-background-color;
+ }
+
+ &--warning {
+ background-color: @notify-warning-background-color;
+ }
}
diff --git a/packages/notify/index.ts b/packages/notify/index.ts
index e4ed09d6..64a2e038 100644
--- a/packages/notify/index.ts
+++ b/packages/notify/index.ts
@@ -1,20 +1,23 @@
+
+import { Weapp } from 'definitions/weapp';
import { VantComponent } from '../common/component';
-import { RED } from '../common/color';
+import { WHITE } from '../common/color';
import { safeArea } from '../mixins/safe-area';
VantComponent({
mixins: [safeArea()],
props: {
+ type: {
+ type: String,
+ value: 'danger'
+ },
message: String,
color: {
type: String,
- value: '#fff'
- },
- background: {
- type: String,
- value: RED
+ value: WHITE
},
+ background: String,
duration: {
type: Number,
value: 3000
@@ -27,12 +30,12 @@ VantComponent({
methods: {
show() {
- const { duration } = this.data;
+ const { duration, onOpened } = this.data;
clearTimeout(this.timer);
this.setData({
show: true
- });
+ }, onOpened);
if (duration > 0 && duration !== Infinity) {
this.timer = setTimeout(() => {
@@ -42,10 +45,19 @@ VantComponent({
},
hide() {
+ const { onClose } = this.data;
+
clearTimeout(this.timer);
this.setData({
show: false
- });
+ }, onClose);
+ },
+
+ onTap(event: Weapp.Event) {
+ const { onClick } = this.data;
+ if (onClick) {
+ onClick(event.detail);
+ }
}
}
});
diff --git a/packages/notify/index.wxml b/packages/notify/index.wxml
index a91c40fd..5a44673e 100644
--- a/packages/notify/index.wxml
+++ b/packages/notify/index.wxml
@@ -1,9 +1,11 @@
-
- {{ message }}
+
+
+ {{ message }}
+
diff --git a/packages/notify/notify.ts b/packages/notify/notify.ts
index 4bc91328..071fa2f8 100644
--- a/packages/notify/notify.ts
+++ b/packages/notify/notify.ts
@@ -1,6 +1,7 @@
-import { RED, WHITE } from '../common/color';
+import { WHITE } from '../common/color';
interface NotifyOptions {
+ type?: 'primary' | 'success' | 'danger' | 'warning';
color?: string;
zIndex?: number;
message: string;
@@ -9,15 +10,22 @@ interface NotifyOptions {
selector?: string;
background?: string;
safeAreaInsetTop?: boolean;
+ onClick?: () => void;
+ onOpened?: () => void;
+ onClose?: () => void;
}
const defaultOptions = {
selector: '#van-notify',
+ type: 'danger',
message: '',
+ background: '',
duration: 3000,
zIndex: 110,
color: WHITE,
- background: RED
+ onClick: () => {},
+ onOpened: () => {},
+ onClose: () => {}
};
function parseOptions(message: NotifyOptions | string): NotifyOptions {