fix(Notify): should reset options (#1920)

* docs(Notify): update demo

* fix(Notify): should reset options

* feat: update demo

example/pages/notify/index.js

@@ -6,13 +6,18 @@ Page({
     Notify('通知内容');
   },
 
-  showNotify2() {
+  showCustomColor() {
+    Notify({
+      message: '自定义颜色',
+      color: '#ad0000',
+      background: '#ffe1e1'
+    });
+  },
+
+  showCustomDuration() {
     Notify({
       duration: 1000,
-      message: '通知内容',
+      message: '自定义时长'
-      selector: '#custom-selector',
-      background: '#1989fa',
-      safeAreaInsetTop: true
     });
   },
 

example/pages/notify/index.wxml

@@ -6,12 +6,12 @@
 />
 
 <demo-block padding title="基础用法">
-  <van-button bind:click="showNotify">显示消息通知</van-button>
+  <van-button type="danger" bind:click="showNotify">基础用法</van-button>
 </demo-block>
 
-<demo-block padding title="自定义配置">
+<demo-block padding title="自定义通知">
-  <van-button bind:click="showNotify2">显示自定义消息通知</van-button>
+  <van-button type="primary" class="demo-margin-right" bind:click="showCustomColor">自定义颜色</van-button>
+  <van-button type="primary" bind:click="showCustomDuration">自定义时长</van-button>
 </demo-block>
 
 <van-notify id="van-notify" safe-area-inset-top />
-<van-notify id="custom-selector" />

packages/common/color.ts

@@ -1,4 +1,5 @@
 export const RED = '#f44';
 export const BLUE = '#1989fa';
+export const WHITE = '#fff';
 export const GREEN = '#07c160';
 export const ORANGE = '#ff976a';

packages/notify/README.md

@@ -20,21 +20,39 @@ Notify('通知内容');
 ```
 
 ```html
+<!-- 在页面内添加对应的节点 -->
 <van-notify id="van-notify" />
 ```
 
-### 自定义配置
+### 自定义通知
+
+自定义消息通知的颜色和展示时长
 
 ```js
 Notify({
-  message: '通知内容',
+  message: '自定义颜色',
+  color: '#ad0000',
+  background: '#ffe1e1'
+});
+
+Notify({
+  message: '自定义时长',
+  duration: 1000
+});
+```
+
+### 自定义选择器
+
+```js
+Notify({
+  message: '自定义节点选择器',
   duration: 1000,
-  selector: '#custom-selector',
+  selector: '#custom-selector'
-  background: '#1989fa'
 });
 ```
 
 ```html
+<!-- 在页面内添加自定义节点 -->
 <van-notify id="custom-selector" />
 ```
 
@@ -44,7 +62,7 @@ Notify({
 |-----------|-----------|-----------|-------------|
 | message | 展示文案 | *string* | - |
 | duration | 持续时间 | *number* | `3000` |
-| selector | 自定义选择器 | *string* | `van-notify` |
+| selector | 自定义节点选择器 | *string* | `van-notify` |
 | color | 字体颜色 | *string* | `#fff` | |
 | background | 背景色 | *string* | `#f44` |
 | context | 选择器的选择范围，可以传入自定义组件的 this 作为上下文 | *object* | 当前页面 |

packages/notify/notify.ts

@@ -1,3 +1,5 @@
+import { RED, WHITE } from '../common/color';
+
 interface NotifyOptions {
   color?: string;
   zIndex?: number;
@@ -11,7 +13,11 @@ interface NotifyOptions {
 
 const defaultOptions = {
   selector: '#van-notify',
-  duration: 3000
+  message: '',
+  duration: 3000,
+  zIndex: 110,
+  color: WHITE,
+  background: RED
 };
 
 function parseOptions(message: NotifyOptions | string): NotifyOptions {