feat(Notify): 增加 type 和 onOpened onClose onClick 回调 (#2021)

example/pages/notify/index.js

@@ -21,6 +21,14 @@ Page({
     });
   },
 
+  showNotifyByType(event) {
+    const { type } = event.currentTarget.dataset;
+    Notify({
+      type,
+      message: '通知内容'
+    });
+  },
+
   onClickLeft() {
     wx.navigateBack();
   }

example/pages/notify/index.wxml

@@ -9,6 +9,17 @@
   <van-button type="danger" bind:click="showNotify">基础用法</van-button>
 </demo-block>
 
+<demo-block padding title="通知类型">
+  <view class="demo-margin-bottom">
+    <van-button class="demo-margin-right" type="info" data-type="primary" bind:click="showNotifyByType">主要通知</van-button>
+    <van-button type="primary" data-type="success" bind:click="showNotifyByType">成功通知</van-button>
+  </view>
+  <view class="demo-margin-bottom">
+    <van-button class="demo-margin-right" type="danger" data-type="danger" bind:click="showNotifyByType">危险通知</van-button>
+    <van-button type="warning" data-type="warning" bind:click="showNotifyByType">警告通知</van-button>
+  </view>
+</demo-block>
+
 <demo-block padding title="自定义通知">
   <van-button type="primary" class="demo-margin-right" bind:click="showCustomColor">自定义颜色</van-button>
   <van-button type="primary" bind:click="showCustomDuration">自定义时长</van-button>

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);

packages/notify/README.md

@@ -24,6 +24,24 @@ Notify('通知内容');
 <van-notify id="van-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* | - | - |

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;
+  }
 }

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'
+      value: WHITE
-    },
-    background: {
-      type: String,
-      value: RED
     },
+    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);
+      }
     }
   }
 });

packages/notify/index.wxml

@@ -1,9 +1,11 @@
 <van-transition
   name="slide-down"
   show="{{ show }}"
-  custom-class="van-notify"
+  custom-class="van-notify van-notify--{{ type }}"
   custom-style="background:{{ background }}; color: {{ color }}; z-index: {{ zIndex }};"
 >
-  <view wx:if="{{ safeAreaInsetTop }}" class="van-notify__safe-top" style="padding-top: {{ statusBarHeight }}px"></view>
+  <view bind:tap="onTap">
-  {{ message }}
+    <view wx:if="{{ safeAreaInsetTop }}" class="van-notify__safe-top" style="padding-top: {{ statusBarHeight }}px"></view>
+    {{ message }}
+  </view>
 </van-transition>

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 {