diff --git a/example/pages/notify/index.js b/example/pages/notify/index.js index 5bcdb4f1..7413587a 100644 --- a/example/pages/notify/index.js +++ b/example/pages/notify/index.js @@ -6,13 +6,18 @@ Page({ Notify('通知内容'); }, - showNotify2() { + showCustomColor() { + Notify({ + message: '自定义颜色', + color: '#ad0000', + background: '#ffe1e1' + }); + }, + + showCustomDuration() { Notify({ duration: 1000, - message: '通知内容', - selector: '#custom-selector', - background: '#1989fa', - safeAreaInsetTop: true + message: '自定义时长' }); }, diff --git a/example/pages/notify/index.wxml b/example/pages/notify/index.wxml index be58b262..97144c63 100644 --- a/example/pages/notify/index.wxml +++ b/example/pages/notify/index.wxml @@ -6,12 +6,12 @@ /> - 显示消息通知 + 基础用法 - - 显示自定义消息通知 + + 自定义颜色 + 自定义时长 - 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/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* | 当前页面 | 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 {