diff --git a/packages/dialog/Dialog.vue b/packages/dialog/Dialog.vue index 2f9f52096..0b6b346e6 100644 --- a/packages/dialog/Dialog.vue +++ b/packages/dialog/Dialog.vue @@ -17,7 +17,7 @@
@@ -68,6 +68,7 @@ export default create({ callback: Function, className: [String, Object, Array], beforeClose: Function, + messageAlign: String, confirmButtonText: String, cancelButtonText: String, showCancelButton: Boolean, diff --git a/packages/dialog/en-US.md b/packages/dialog/en-US.md index 85a71b760..8135734bf 100644 --- a/packages/dialog/en-US.md +++ b/packages/dialog/en-US.md @@ -11,6 +11,7 @@ Vue.use(Dialog); ### Usage #### Alert dialog + Used to prompt for some messages, only including one confirm button ```javascript @@ -29,6 +30,7 @@ Dialog.alert({ ``` #### Confirm dialog + Used to confirm some messages, including a confirm button and a cancel button ```javascript @@ -43,6 +45,7 @@ Used to confirm some messages, including a confirm button and a cancel button ``` #### $dialog Method + After import the Dialog component, the $dialog method is automatically mounted on Vue.prototype, making it easy to call within a vue component. ```js @@ -72,6 +75,7 @@ export default { |------|------|------|------| | title | Title | `String` | - | | message | Message | `String` | - | +| messageAlign | Message text align,can be set to `left` `right` | `String` | `center` | | className | Custom className | `String | Array | Object` | - | | showConfirmButton | Whether to show confirm button | `Boolean` | `true` | | showCancelButton | Whether to show cancel button | `Boolean` | `false` | @@ -83,6 +87,7 @@ export default { | beforeClose | Callback before close,
call done() to close dialog,
call done(false) to cancel loading | (action: string, done: function) => void | - | #### Advanced Usage + If you need to render vue components within a dialog, you can use dialog component. ```html @@ -132,7 +137,7 @@ export default { | v-model | Whether to show dialog | `Boolean` | - | | title | Title | `String` | - | | message | Message | `String` | - | -| async-confirm | Whether to close async,The incoming function is triggered when you click confirm. | `Function` | - | +| 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` | diff --git a/packages/dialog/index.js b/packages/dialog/index.js index a4229d6e2..7f9991403 100644 --- a/packages/dialog/index.js +++ b/packages/dialog/index.js @@ -44,6 +44,7 @@ Dialog.defaultOptions = { className: '', lockScroll: true, beforeClose: null, + messageAlign: '', confirmButtonText: '', cancelButtonText: '', showConfirmButton: true, diff --git a/packages/dialog/index.less b/packages/dialog/index.less index b8250caa2..83ca37140 100644 --- a/packages/dialog/index.less +++ b/packages/dialog/index.less @@ -28,12 +28,21 @@ line-height: 1.5; max-height: 60vh; overflow-y: auto; + text-align: center; -webkit-overflow-scrolling: touch; &--has-title { padding-top: 12px; color: @gray-darker; } + + &--left { + text-align: left; + } + + &--right { + text-align: right; + } } &__footer { diff --git a/packages/dialog/zh-CN.md b/packages/dialog/zh-CN.md index 7ce761e5f..44c71fc62 100644 --- a/packages/dialog/zh-CN.md +++ b/packages/dialog/zh-CN.md @@ -12,6 +12,7 @@ Vue.use(Dialog); ### 代码演示 #### 消息提示 + 用于提示一些消息,只包含一个确认按钮 ```javascript @@ -30,6 +31,7 @@ Dialog.alert({ ``` #### 消息确认 + 用于确认消息,包含取消和确认按钮 ```javascript @@ -44,6 +46,7 @@ Dialog.confirm({ ``` #### 全局方法 + 引入 Dialog 组件后,会自动在 Vue 的 prototype 上挂载 $dialog 方法,在所有组件内部都可以直接调用此方法 ```js @@ -73,6 +76,7 @@ export default { |------|------|------|------|------| | title | 标题 | `String` | - | - | | message | 内容 | `String` | - | - | +| messageAlign | 内容对齐方式,可选值为`left` `right` | `String` | `center` | 1.4.10 | | className | 自定义类名 | `String | Array | Object` | - | 1.1.7 | | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` | - | | showCancelButton | 是否展示取消按钮 | `Boolean` | `false` | - | @@ -136,6 +140,7 @@ export default { | v-model | 是否显示弹窗 | `Boolean` | - | - | | title | 标题 | `String` | - | - | | message | 内容 | `String` | - | - | +| message-align | 内容对齐方式,可选值为`left` `right` | `String` | `center` | 1.4.10 | | show-confirm-button | 是否展示确认按钮 | `Boolean` | `true` | - | | show-cancel-button | 是否展示取消按钮 | `Boolean` | `false` | - | | confirm-button-text | 确认按钮的文案 | `String` | `确认` | - | diff --git a/types/dialog.d.ts b/types/dialog.d.ts index 9193b29f4..97978cefc 100644 --- a/types/dialog.d.ts +++ b/types/dialog.d.ts @@ -7,6 +7,7 @@ export type DialogOptions = { overlay?: boolean; className?: string; lockScroll?: boolean; + messageAlign?: string; confirmButtonText?: string; cancelButtonText?: string; showConfirmButton?: boolean;