From fc412ce1aa8bb58302a52fd0a3afa8065ee12121 Mon Sep 17 00:00:00 2001 From: neverland Date: Mon, 8 Apr 2019 20:27:50 +0800 Subject: [PATCH] =?UTF-8?q?[new=20feature]=20Dialog:=20add=20confirmButton?= =?UTF-8?q?Text=E3=80=81cancelButtonText=20prop=20(#3107)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/dialog/Dialog.js | 6 ++++- packages/dialog/en-US.md | 10 +++++--- packages/dialog/index.js | 4 +++- .../test/__snapshots__/index.spec.js.snap | 13 ++++++++++ packages/dialog/test/index.spec.js | 24 +++++++++++++++++++ packages/dialog/zh-CN.md | 12 ++++++---- types/dialog.d.ts | 4 +++- 7 files changed, 63 insertions(+), 10 deletions(-) create mode 100644 packages/dialog/test/__snapshots__/index.spec.js.snap diff --git a/packages/dialog/Dialog.js b/packages/dialog/Dialog.js index 55061e77b..e42c6307b 100644 --- a/packages/dialog/Dialog.js +++ b/packages/dialog/Dialog.js @@ -14,8 +14,10 @@ export default sfc({ callback: Function, beforeClose: Function, messageAlign: String, - confirmButtonText: String, cancelButtonText: String, + cancelButtonColor: String, + confirmButtonText: String, + confirmButtonColor: String, showCancelButton: Boolean, showConfirmButton: { type: Boolean, @@ -102,6 +104,7 @@ export default sfc({ class={bem('cancel')} loading={this.loading.cancel} text={this.cancelButtonText || t('cancel')} + style={{ color: this.cancelButtonColor }} onClick={() => { this.handleAction('cancel'); }} @@ -113,6 +116,7 @@ export default sfc({ class={[bem('confirm'), { 'van-hairline--left': hasButtons }]} loading={this.loading.confirm} text={this.confirmButtonText || t('confirm')} + style={{ color: this.confirmButtonColor }} onClick={() => { this.handleAction('confirm'); }} diff --git a/packages/dialog/en-US.md b/packages/dialog/en-US.md index 33f307189..5292ea2d0 100644 --- a/packages/dialog/en-US.md +++ b/packages/dialog/en-US.md @@ -121,8 +121,10 @@ export default { | className | Custom className | `String | Array | Object` | - | | showConfirmButton | Whether to show confirm button | `Boolean` | `true` | | showCancelButton | Whether to show cancel button | `Boolean` | `false` | +| cancelButtonText | Cancel button text | `String` | `Cancel` | +| cancelButtonColor | Cancel button color | `String` | `#000` | | confirmButtonText | Confirm button text | `String` | `Confirm` | -| cancelButtonText | Cancel button test | `String` | `Cancel` | +| confirmButtonColor | Confirm button color | `String` | `#1989fa` | | overlay | Whether to show overlay | `Boolean` | `true` | | closeOnClickOverlay | Whether to close when click overlay | `Boolean` | `false` | | lockScroll | Whether to lock body scroll | `Boolean` | `true` | @@ -139,8 +141,10 @@ export default { | message-align | Message align，can be set to `left` `right` | `String` | `center` | | show-confirm-button | Whether to show confirm button | `Boolean` | `true` | | show-cancel-button | Whether to show cancel button | `Boolean` | `false` | -| confirm-button-text | Confirm button text | `String` | `Confirm` | -| cancel-button-text | Cancel button test | `String` | `Cancel` | +| cancel-button-text | Cancel button text | `String` | `Cancel` | +| cancel-button-color | Cancel button color | `String` | `#000` | +| confirm-button-text | Confirm button text | `String` | `Confirm` | +| confirm-button-color | Confirm button color | `String` | `#1989fa` | | overlay | Whether to show overlay | `Boolean` | `true` | | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `false` | | lock-scroll | Whether to lock background scroll | `Boolean` | `true` | diff --git a/packages/dialog/index.js b/packages/dialog/index.js index 623aa081f..1cd6c4547 100644 --- a/packages/dialog/index.js +++ b/packages/dialog/index.js @@ -46,8 +46,10 @@ Dialog.defaultOptions = { beforeClose: null, messageAlign: '', getContainer: 'body', - confirmButtonText: '', cancelButtonText: '', + cancelButtonColor: null, + confirmButtonText: '', + confirmButtonColor: null, showConfirmButton: true, showCancelButton: false, closeOnClickOverlay: false, diff --git a/packages/dialog/test/__snapshots__/index.spec.js.snap b/packages/dialog/test/__snapshots__/index.spec.js.snap new file mode 100644 index 000000000..a033091b4 --- /dev/null +++ b/packages/dialog/test/__snapshots__/index.spec.js.snap @@ -0,0 +1,13 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`button color 1`] = ` +
+
+
+`; + +exports[`button text 1`] = ` +
+
+
+`; diff --git a/packages/dialog/test/index.spec.js b/packages/dialog/test/index.spec.js index 073256d08..a7d5fd807 100644 --- a/packages/dialog/test/index.spec.js +++ b/packages/dialog/test/index.spec.js @@ -76,3 +76,27 @@ test('register component', () => { Vue.use(Dialog); expect(Vue.component(DialogVue.name)).toBeTruthy(); }); + +test('button color', () => { + const wrapper = mount(DialogVue, { + propsData: { + value: true, + showCancelButton: true, + cancelButtonColor: 'white', + confirmButtonColor: 'red' + } + }); + expect(wrapper).toMatchSnapshot(); +}); + +test('button text', () => { + const wrapper = mount(DialogVue, { + propsData: { + value: true, + showCancelButton: true, + cancelButtonText: 'Custom cancel', + confirmButtonText: 'Custom confirm' + } + }); + expect(wrapper).toMatchSnapshot(); +}); diff --git a/packages/dialog/zh-CN.md b/packages/dialog/zh-CN.md index 0dfa402f0..523b91fa8 100644 --- a/packages/dialog/zh-CN.md +++ b/packages/dialog/zh-CN.md @@ -124,8 +124,10 @@ export default { | className | 自定义类名 | `String | Array | Object` | - | 1.1.7 | | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - | | showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - | -| confirmButtonText | 确认按钮的文案 | `String` | `确认` | - | -| cancelButtonText | 取消按钮的文案 | `String` | `取消` | - | +| cancelButtonText | 取消按钮文案 | `String` | `取消` | - | +| cancelButtonColor | 取消按钮颜色 | `String` | `#000` | 1.6.14 | +| confirmButtonText | 确认按钮文案 | `String` | `确认` | - | +| confirmButtonColor | 确认按钮颜色 | `String` | `#1989fa` | 1.6.14 | | overlay | 是否展示蒙层 | `Boolean` | `true` | - | | closeOnClickOverlay | 点击蒙层时是否关闭弹窗 | `Boolean` | `false` | - | | lockScroll | 是否锁定背景滚动 | `Boolean` | `true` | - | @@ -144,8 +146,10 @@ export default { | message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` | 1.5.0 | | show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` | - | | show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` | - | -| confirm-button-text | 确认按钮的文案 | `String` | `确认` | - | -| cancel-button-text | 取消按钮的文案 | `String` | `取消` | - | +| cancel-button-text | 取消按钮文案 | `String` | `取消` | - | +| cancel-button-color | 取消按钮颜色 | `String` | `#000` | 1.6.14 | +| confirm-button-text | 确认按钮文案 | `String` | `确认` | - | +| confirm-button-color | 确认按钮颜色 | `String` | `#1989fa` | 1.6.14 | | overlay | 是否展示蒙层 | `Boolean` | `true` | - | | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `false` | - | | lock-scroll | 是否锁定背景滚动 | `Boolean` | `true` | - | diff --git a/types/dialog.d.ts b/types/dialog.d.ts index d4d0d8ec9..f463ef8bb 100644 --- a/types/dialog.d.ts +++ b/types/dialog.d.ts @@ -8,8 +8,10 @@ export type DialogOptions = { className?: any; lockScroll?: boolean; messageAlign?: string; - confirmButtonText?: string; cancelButtonText?: string; + cancelButtonColor?: string; + confirmButtonText?: string; + confirmButtonColor?: string; showConfirmButton?: boolean; showCancelButton?: boolean; closeOnClickOverlay?: boolean;