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;