From a0497d5858109634b451efccde6c526e168f5db3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Wed, 28 Aug 2019 11:47:12 +0800 Subject: [PATCH 1/3] docs(Notify): update demo --- example/pages/notify/index.js | 12 ++++++++++-- example/pages/notify/index.wxml | 7 ++++--- packages/notify/README.md | 28 +++++++++++++++++++++++----- 3 files changed, 37 insertions(+), 10 deletions(-) diff --git a/example/pages/notify/index.js b/example/pages/notify/index.js index 5bcdb4f1..838965b4 100644 --- a/example/pages/notify/index.js +++ b/example/pages/notify/index.js @@ -6,12 +6,20 @@ Page({ Notify('通知内容'); }, - showNotify2() { + showCustomColor() { + Notify({ + message: '通知内容', + selector: '#custom-selector', + background: '#1989fa', + safeAreaInsetTop: true + }); + }, + + showCustomDuration() { Notify({ duration: 1000, message: '通知内容', selector: '#custom-selector', - background: '#1989fa', safeAreaInsetTop: true }); }, diff --git a/example/pages/notify/index.wxml b/example/pages/notify/index.wxml index be58b262..8bb2b1cd 100644 --- a/example/pages/notify/index.wxml +++ b/example/pages/notify/index.wxml @@ -6,11 +6,12 @@ /> - 显示消息通知 + 基础用法 - - 显示自定义消息通知 + + 自定义颜色 + 自定义时长 diff --git a/packages/notify/README.md b/packages/notify/README.md index 37fbfcbe..41bb7a61 100644 --- a/packages/notify/README.md +++ b/packages/notify/README.md @@ -20,21 +20,39 @@ Notify('通知内容'); ``` ```html + ``` -### 自定义配置 +### 自定义通知 + +自定义消息通知的颜色和展示时长 ```js Notify({ - message: '通知内容', + message: '自定义颜色', + color: '#ad0000', + background: '#ffe1e1' +}); + +Notify({ + message: '自定义时长', + duration: 1000 +}); +``` + +### 自定义选择器 + +```js +Notify({ + message: '自定义节点选择器', duration: 1000, - selector: '#custom-selector', - background: '#1989fa' + selector: '#custom-selector' }); ``` ```html + ``` @@ -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* | 当前页面 | From 2ca2f171d03702367ac05668e14a7c3c7a314ae0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Wed, 28 Aug 2019 14:08:53 +0800 Subject: [PATCH 2/3] fix(Notify): should reset options --- packages/common/color.ts | 1 + packages/notify/notify.ts | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/common/color.ts b/packages/common/color.ts index c850d2a1..0e6205b5 100644 --- a/packages/common/color.ts +++ b/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'; diff --git a/packages/notify/notify.ts b/packages/notify/notify.ts index e9649dbd..4bc91328 100644 --- a/packages/notify/notify.ts +++ b/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 { From a7d6d6b2220066554843b72de344e0f1e8d99207 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= Date: Wed, 28 Aug 2019 14:10:32 +0800 Subject: [PATCH 3/3] feat: update demo --- example/pages/notify/index.js | 11 ++++------- example/pages/notify/index.wxml | 3 +-- 2 files changed, 5 insertions(+), 9 deletions(-) diff --git a/example/pages/notify/index.js b/example/pages/notify/index.js index 838965b4..7413587a 100644 --- a/example/pages/notify/index.js +++ b/example/pages/notify/index.js @@ -8,19 +8,16 @@ Page({ showCustomColor() { Notify({ - message: '通知内容', - selector: '#custom-selector', - background: '#1989fa', - safeAreaInsetTop: true + message: '自定义颜色', + color: '#ad0000', + background: '#ffe1e1' }); }, showCustomDuration() { Notify({ duration: 1000, - message: '通知内容', - selector: '#custom-selector', - safeAreaInsetTop: true + message: '自定义时长' }); }, diff --git a/example/pages/notify/index.wxml b/example/pages/notify/index.wxml index 8bb2b1cd..97144c63 100644 --- a/example/pages/notify/index.wxml +++ b/example/pages/notify/index.wxml @@ -10,9 +10,8 @@ - 自定义颜色 + 自定义颜色 自定义时长 -