[new feature] Dialog: add message-align prop (#2259)

packages/dialog/Dialog.vue

@@ -17,7 +17,7 @@
           <div
             v-if="message"
             v-html="message"
-            :class="b('message', { 'has-title': title })"
+            :class="b('message', { 'has-title': title, [messageAlign]: messageAlign })"
           />
         </slot>
       </div>
@@ -68,6 +68,7 @@ export default create({
     callback: Function,
     className: [String, Object, Array],
     beforeClose: Function,
+    messageAlign: String,
     confirmButtonText: String,
     cancelButtonText: String,
     showCancelButton: Boolean,

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,<br>call done() to close dialog,<br>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` |

packages/dialog/index.js

@@ -44,6 +44,7 @@ Dialog.defaultOptions = {
   className: '',
   lockScroll: true,
   beforeClose: null,
+  messageAlign: '',
   confirmButtonText: '',
   cancelButtonText: '',
   showConfirmButton: true,

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 {

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` |  `确认` | - |

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;