From 9dc028b96e5f2311abcd7dc090c009cb741ca1a7 Mon Sep 17 00:00:00 2001 From: linrz <33575974+linrz@users.noreply.github.com> Date: Wed, 18 Sep 2019 14:23:25 +0800 Subject: [PATCH] =?UTF-8?q?feat(Notify):=20=E5=A2=9E=E5=8A=A0=20type=20?= =?UTF-8?q?=E5=92=8C=20onOpened=20onClose=20onClick=20=E5=9B=9E=E8=B0=83?= =?UTF-8?q?=20(#2021)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- example/pages/notify/index.js | 8 ++++++++ example/pages/notify/index.wxml | 11 +++++++++++ packages/common/style/var.less | 4 ++++ packages/notify/README.md | 24 +++++++++++++++++++++++- packages/notify/index.less | 16 ++++++++++++++++ packages/notify/index.ts | 30 +++++++++++++++++++++--------- packages/notify/index.wxml | 8 +++++--- packages/notify/notify.ts | 12 ++++++++++-- 8 files changed, 98 insertions(+), 15 deletions(-) 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 {