From 26c754e2f6c9fe7018776710e1a9a563c4fd225e Mon Sep 17 00:00:00 2001 From: rex Date: Mon, 3 Aug 2020 21:02:14 +0800 Subject: [PATCH] feat(Dialog): add new prop theme (#6921) * feat(dialog): add new prop button-theme & change default confirm button text color * test(dialog): update snapshot * refactor(dialog): rename button-theme to theme * refactor(dialog): add theme definition * docs(dialog): add version tip & change default confirm-button-color --- src/dialog/Dialog.js | 39 ++++++++++++++++++- src/dialog/README.md | 27 ++++++++++++- src/dialog/README.zh-CN.md | 27 ++++++++++++- src/dialog/demo/index.vue | 25 ++++++++++++ src/dialog/index.js | 1 + src/dialog/index.less | 6 +++ .../test/__snapshots__/demo.spec.js.snap | 9 +++++ src/style/var.less | 2 +- types/dialog.d.ts | 1 + 9 files changed, 131 insertions(+), 6 deletions(-) diff --git a/src/dialog/Dialog.js b/src/dialog/Dialog.js index 815dad25c..4b132f926 100644 --- a/src/dialog/Dialog.js +++ b/src/dialog/Dialog.js @@ -2,6 +2,8 @@ import { createNamespace, addUnit } from '../utils'; import { BORDER_TOP, BORDER_LEFT } from '../utils/constant'; import { PopupMixin } from '../mixins/popup'; import Button from '../button'; +import GoodsAction from '../goods-action'; +import GoodsActionButton from '../goods-action-button'; const [createComponent, bem, t] = createNamespace('dialog'); @@ -11,6 +13,10 @@ export default createComponent({ props: { title: String, width: [Number, String], + theme: { + type: String, + default: 'default', + }, message: String, className: null, callback: Function, @@ -100,6 +106,37 @@ export default createComponent({ this.$emit('closed'); }, + genRoundButtons() { + return ( + + {this.showCancelButton && ( + { + this.handleAction('cancel'); + }} + /> + )} + {this.showConfirmButton && ( + { + this.handleAction('confirm'); + }} + /> + )} + + ); + }, + genButtons() { const multiple = this.showCancelButton && this.showConfirmButton; @@ -188,7 +225,7 @@ export default createComponent({ > {Title} {this.genContent(title, messageSlot)} - {this.genButtons()} + {this.theme === 'round' ? this.genRoundButtons() : this.genButtons()} ); diff --git a/src/dialog/README.md b/src/dialog/README.md index 4dbcace02..82faf94ae 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -30,6 +30,27 @@ Dialog.alert({ }); ``` +### Round Style + +use round style. + +```js +Dialog.alert({ + title: 'Title', + message: 'Content', + theme: 'round', +}).then(() => { + // on close +}); + +Dialog.alert({ + message: 'Content', + theme: 'round', +}).then(() => { + // on close +}); +``` + ### Confirm dialog Used to confirm some messages, including a confirm button and a cancel button. @@ -120,13 +141,14 @@ export default { | width `v2.2.7` | Width | _number \| string_ | `320px` | | message | Message | _string_ | - | | messageAlign | Message text align，can be set to `left` `right` | _string_ | `center` | +| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` | | className | Custom className | _any_ | - | | 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_ | `black` | | confirmButtonText | Confirm button text | _string_ | `Confirm` | -| confirmButtonColor | Confirm button color | _string_ | `#1989fa` | +| confirmButtonColor | Confirm button color | _string_ | `#ee0a24` | | overlay | Whether to show overlay | _boolean_ | `true` | | overlayClass `v2.2.7` | Custom overlay class | _string_ | - | | overlayStyle `v2.2.7` | Custom overlay style | _object_ | - | @@ -147,12 +169,13 @@ export default { | width `v2.2.7` | Width | _number \| string_ | `320px` | | message | Message | _string_ | - | | message-align | Message align，can be set to `left` `right` | _string_ | `center` | +| theme `v2.10.0` | theme style，can be set to `round` | _string_ | `default` | | show-confirm-button | Whether to show confirm button | _boolean_ | `true` | | show-cancel-button | Whether to show cancel button | _boolean_ | `false` | | cancel-button-text | Cancel button text | _string_ | `Cancel` | | cancel-button-color | Cancel button color | _string_ | `black` | | confirm-button-text | Confirm button text | _string_ | `Confirm` | -| confirm-button-color | Confirm button color | _string_ | `#1989fa` | +| confirm-button-color | Confirm button color | _string_ | `#ee0a24` | | overlay | Whether to show overlay | _boolean_ | `true` | | overlay-class `v2.2.7` | Custom overlay class | _string_ | - | | overlay-style `v2.2.7` | Custom overlay style | _object_ | - | diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index 7ead0b38c..1ac85430f 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -56,6 +56,27 @@ Dialog.alert({ }); ``` +### 圆角风格 + +样式为圆角风格。 + +```js +Dialog.alert({ + title: '标题', + message: '弹窗内容', + theme: 'round', +}).then(() => { + // on close +}); + +Dialog.alert({ + message: '弹窗内容', + theme: 'round', +}).then(() => { + // on close +}); +``` + ### 消息确认 用于确认消息，包含取消和确认按钮。 @@ -150,11 +171,12 @@ export default { | width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` | | message | 文本内容，支持通过`\n`换行 | _string_ | - | | messageAlign | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | +| theme | 样式风格，可选值为`round` | _string_ | `default` | | className | 自定义类名 | _any_ | - | | showConfirmButton | 是否展示确认按钮 | _boolean_ | `true` | | showCancelButton | 是否展示取消按钮 | _boolean_ | `false` | | confirmButtonText | 确认按钮文案 | _string_ | `确认` | -| confirmButtonColor | 确认按钮颜色 | _string_ | `#1989fa` | +| confirmButtonColor | 确认按钮颜色 | _string_ | `#ee0a24` | | cancelButtonText | 取消按钮文案 | _string_ | `取消` | | cancelButtonColor | 取消按钮颜色 | _string_ | `black` | | overlay | 是否展示遮罩层 | _boolean_ | `true` | @@ -179,10 +201,11 @@ export default { | width `v2.2.7` | 弹窗宽度，默认单位为`px` | _number \| string_ | `320px` | | message | 文本内容，支持通过`\n`换行 | _string_ | - | | message-align | 内容对齐方式，可选值为`left` `right` | _string_ | `center` | +| theme | 样式风格，可选值为`round` | _string_ | `default` | | show-confirm-button | 是否展示确认按钮 | _boolean_ | `true` | | show-cancel-button | 是否展示取消按钮 | _boolean_ | `false` | | confirm-button-text | 确认按钮文案 | _string_ | `确认` | -| confirm-button-color | 确认按钮颜色 | _string_ | `#1989fa` | +| confirm-button-color | 确认按钮颜色 | _string_ | `#ee0a24` | | cancel-button-text | 取消按钮文案 | _string_ | `取消` | | cancel-button-color | 取消按钮颜色 | _string_ | `black` | | overlay | 是否展示遮罩层 | _boolean_ | `true` | diff --git a/src/dialog/demo/index.vue b/src/dialog/demo/index.vue index 5b1fa2165..41e3dd17b 100644 --- a/src/dialog/demo/index.vue +++ b/src/dialog/demo/index.vue @@ -9,6 +9,15 @@ + + + {{ t('alert1') }} + + + {{ t('alert2') }} + + + {{ t('confirm') }} @@ -43,6 +52,7 @@ export default { 'zh-CN': { alert1: '提示弹窗', alert2: '提示弹窗（无标题）', + round: '圆角样式', confirm: '确认弹窗', asyncClose: '异步关闭', componentCall: '组件调用', @@ -79,6 +89,21 @@ export default { }); }, + onClickRound() { + this.$dialog.alert({ + theme: 'round', + title: this.t('title'), + message: this.t('content'), + }); + }, + + onClickRound2() { + this.$dialog.alert({ + theme: 'round', + message: this.t('content'), + }); + }, + onClickConfirm() { this.$dialog.confirm({ title: this.t('title'), diff --git a/src/dialog/index.js b/src/dialog/index.js index 20c33ac17..d2ad34c0e 100644 --- a/src/dialog/index.js +++ b/src/dialog/index.js @@ -53,6 +53,7 @@ Dialog.defaultOptions = { className: '', allowHtml: true, lockScroll: true, + theme: 'default', transition: 'van-dialog-bounce', beforeClose: null, overlayClass: '', diff --git a/src/dialog/index.less b/src/dialog/index.less index 0448d3f55..cc6490c89 100644 --- a/src/dialog/index.less +++ b/src/dialog/index.less @@ -60,6 +60,12 @@ overflow: hidden; user-select: none; + &&--round { + position: relative; + height: auto; + padding: 0 @padding-lg - 5px @padding-md; + } + &--buttons { display: flex; diff --git a/src/dialog/test/__snapshots__/demo.spec.js.snap b/src/dialog/test/__snapshots__/demo.spec.js.snap index d1c83443a..a4f1cb9f1 100644 --- a/src/dialog/test/__snapshots__/demo.spec.js.snap +++ b/src/dialog/test/__snapshots__/demo.spec.js.snap @@ -11,6 +11,15 @@ exports[`renders demo correctly 1`] = ` 提示弹窗（无标题） +