From 842ca1a8b8540c04b9e0982e1c534d35ac881c3a Mon Sep 17 00:00:00 2001 From: rex Date: Tue, 4 Aug 2020 16:02:12 +0800 Subject: [PATCH] feat(dialog): add new prop theme (#3476) --- example/pages/dialog/index.js | 25 +++++++++++++++---- example/pages/dialog/index.wxml | 9 +++++++ packages/dialog/README.md | 29 ++++++++++++++++++++++ packages/dialog/dialog.ts | 20 ++++++++------- packages/dialog/index.json | 4 ++- packages/dialog/index.less | 5 ++++ packages/dialog/index.ts | 42 +++++++++++++++++-------------- packages/dialog/index.wxml | 44 ++++++++++++++++++++++++++++++++- 8 files changed, 143 insertions(+), 35 deletions(-) diff --git a/example/pages/dialog/index.js b/example/pages/dialog/index.js index 84558ebe..803a340f 100644 --- a/example/pages/dialog/index.js +++ b/example/pages/dialog/index.js @@ -12,6 +12,25 @@ Page({ this.setData({ show: true }); }, + getUserInfo(event) { + console.log(event.detail); + }, + + onClickThemeAlert() { + Dialog.alert({ + title: '标题', + theme: 'round-button', + message + }); + }, + + onClickThemeAlert2() { + Dialog.alert({ + theme: 'round-button', + message + }); + }, + onClickAlert() { Dialog.alert({ title: '标题', @@ -19,10 +38,6 @@ Page({ }); }, - getUserInfo(event) { - console.log(event.detail); - }, - onClickAlert2() { Dialog.alert({ message @@ -52,7 +67,7 @@ Page({ }); }, - onClose(event) { + onClose() { this.setData({ show: false }); diff --git a/example/pages/dialog/index.wxml b/example/pages/dialog/index.wxml index a732282f..beb07d00 100644 --- a/example/pages/dialog/index.wxml +++ b/example/pages/dialog/index.wxml @@ -7,6 +7,15 @@ + + + 提示弹窗 + + + 提示弹窗（无标题） + + + 确认弹窗 diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 71156840..e42bce50 100644 --- a/packages/dialog/README.md +++ b/packages/dialog/README.md @@ -43,6 +43,33 @@ Dialog.alert({ }); ``` +### 圆角样式 + +样式为圆角风格。 + +```html + +``` + +```javascript +import Dialog from 'path/to/@vant/weapp/dist/dialog/dialog'; + +Dialog.alert({ + title: '标题', + message: '弹窗内容', + theme: 'round-button', +}).then(() => { + // on close +}); + +Dialog.alert({ + message: '弹窗内容', + theme: 'round-button', +}).then(() => { + // on close +}); +``` + ### 消息确认 用于确认消息，包含取消和确认按钮 @@ -137,6 +164,7 @@ Page({ | title | 标题 | _string_ | - | - | | width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 | | message | 文本内容，支持通过`\n`换行 | _string_ | - | 1.0.0 | +| theme | 样式风格，可选值为`round-button` | _string_ | `default` | | messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | - | | zIndex | z-index 层级 | _number_ | `100` | - | | className | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | - | @@ -179,6 +207,7 @@ Page({ | title | 标题 | _string_ | - | | width | 弹窗宽度，默认单位为`px` | _string \| number_ | `320px` | 1.0.0 | | message | 文本内容，支持通过`\n`换行 | _string_ | - | +| theme | 样式风格，可选值为`round-button` | _string_ | `default` | | message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | | z-index | z-index 层级 | _number_ | `100` | | class-name | 自定义类名，dialog 在自定义组件内时无效 | _string_ | '' | diff --git a/packages/dialog/dialog.ts b/packages/dialog/dialog.ts index 29603d53..78eb2a85 100644 --- a/packages/dialog/dialog.ts +++ b/packages/dialog/dialog.ts @@ -7,6 +7,7 @@ type DialogOptions = { title?: string; width?: string | number; zIndex?: number; + theme?: string; context?: | WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance; @@ -53,10 +54,10 @@ function getContext() { return pages[pages.length - 1]; } -const Dialog: Dialog = (options) => { +const Dialog: Dialog = options => { options = { ...Dialog.currentOptions, - ...options, + ...options }; return new Promise((resolve, reject) => { @@ -70,7 +71,7 @@ const Dialog: Dialog = (options) => { dialog.setData({ onCancel: reject, onConfirm: resolve, - ...options, + ...options }); wx.nextTick(() => { @@ -90,6 +91,7 @@ Dialog.defaultOptions = { show: false, title: '', width: null, + theme: 'default', message: '', zIndex: 100, overlay: true, @@ -105,31 +107,31 @@ Dialog.defaultOptions = { showConfirmButton: true, showCancelButton: false, closeOnClickOverlay: false, - confirmButtonOpenType: '', + confirmButtonOpenType: '' }; Dialog.alert = Dialog; -Dialog.confirm = (options) => +Dialog.confirm = options => Dialog({ showCancelButton: true, - ...options, + ...options }); Dialog.close = () => { - queue.forEach((dialog) => { + queue.forEach(dialog => { dialog.close(); }); queue = []; }; Dialog.stopLoading = () => { - queue.forEach((dialog) => { + queue.forEach(dialog => { dialog.stopLoading(); }); }; -Dialog.setDefaultOptions = (options) => { +Dialog.setDefaultOptions = options => { Object.assign(Dialog.currentOptions, options); }; diff --git a/packages/dialog/index.json b/packages/dialog/index.json index e2ee09ae..1b87cc89 100644 --- a/packages/dialog/index.json +++ b/packages/dialog/index.json @@ -2,6 +2,8 @@ "component": true, "usingComponents": { "van-popup": "../popup/index", - "van-button": "../button/index" + "van-button": "../button/index", + "van-goods-action": "../goods-action//index", + "van-goods-action-button": "../goods-action-button/index" } } diff --git a/packages/dialog/index.less b/packages/dialog/index.less index a66b0107..bcd9a57b 100644 --- a/packages/dialog/index.less +++ b/packages/dialog/index.less @@ -53,6 +53,11 @@ &__footer { display: flex; + + &--round { + position: relative !important; + padding: 0 @padding-lg - 5px @padding-md !important; + } } &__button { diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts index 6782c79b..7240ed22 100644 --- a/packages/dialog/index.ts +++ b/packages/dialog/index.ts @@ -1,7 +1,7 @@ import { VantComponent } from '../common/component'; import { button } from '../mixins/button'; import { openType } from '../mixins/open-type'; -import { GRAY, BLUE } from '../common/color'; +import { GRAY, RED } from '../common/color'; type Action = 'confirm' | 'cancel' | 'overlay'; @@ -13,10 +13,14 @@ VantComponent({ type: Boolean, observer(show: boolean) { !show && this.stopLoading(); - }, + } }, title: String, message: String, + theme: { + type: String, + value: 'default' + }, useSlot: Boolean, className: String, customStyle: String, @@ -30,43 +34,43 @@ VantComponent({ width: null, zIndex: { type: Number, - value: 2000, + value: 2000 }, confirmButtonText: { type: String, - value: '确认', + value: '确认' }, cancelButtonText: { type: String, - value: '取消', + value: '取消' }, confirmButtonColor: { type: String, - value: BLUE, + value: RED }, cancelButtonColor: { type: String, - value: GRAY, + value: GRAY }, showConfirmButton: { type: Boolean, - value: true, + value: true }, overlay: { type: Boolean, - value: true, + value: true }, transition: { type: String, - value: 'scale', - }, + value: 'scale' + } }, data: { loading: { confirm: false, - cancel: false, - }, + cancel: false + } }, methods: { @@ -85,7 +89,7 @@ VantComponent({ handleAction(action: Action) { if (this.data.asyncClose) { this.setData({ - [`loading.${action}`]: true, + [`loading.${action}`]: true }); } @@ -94,7 +98,7 @@ VantComponent({ close() { this.setData({ - show: false, + show: false }); }, @@ -102,8 +106,8 @@ VantComponent({ this.setData({ loading: { confirm: false, - cancel: false, - }, + cancel: false + } }); }, @@ -122,6 +126,6 @@ VantComponent({ if (callback) { callback(this); } - }, - }, + } + } }); diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml index cbad7f6f..bcec2742 100644 --- a/packages/dialog/index.wxml +++ b/packages/dialog/index.wxml @@ -27,7 +27,49 @@ {{ message }} - + + + {{ cancelButtonText }} + + + {{ confirmButtonText }} + + + +