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

packages/dialog/README.md

@@ -39,6 +39,7 @@ Dialog.alert({
 ```
 
 #### 消息确认
+
 用于确认消息，包含取消和确认按钮
 
 ```javascript
@@ -127,6 +128,7 @@ Page({
 |-----------|-----------|-----------|-------------|
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| messageAlign | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
 | zIndex | z-index 层级 | `Number` | `100` |
 | selector | 自定义选择器 | `String` | `van-dialog` |
 | showConfirmButton | 是否展示确认按钮 | `Boolean` | `true` |
@@ -149,6 +151,7 @@ Page({
 | show | 是否显示弹窗 | `Boolean` | - |
 | title | 标题 | `String` | - |
 | message | 内容 | `String` | - |
+| message-align | 内容对齐方式，可选值为`left` `right` | `String` | `center` |
 | z-index | z-index 层级 | `Number` | `100` |
 | show-confirm-button | 是否展示确认按钮 | `Boolean` |  `true` |
 | show-cancel-button | 是否展示取消按钮 | `Boolean` |  `false` |

packages/dialog/dialog.ts

@@ -11,6 +11,7 @@ type DialogOptions = {
   selector?: string;
   transition?: string;
   asyncClose?: boolean;
+  messageAlign?: string;
   confirmButtonText?: string;
   cancelButtonText?: string;
   showConfirmButton?: boolean;
@@ -68,6 +69,7 @@ Dialog.defaultOptions = {
   zIndex: 100,
   overlay: true,
   asyncClose: false,
+  messageAlign: '',
   transition: 'scale',
   selector: '#van-dialog',
   confirmButtonText: '确认',

packages/dialog/index.less

@@ -23,12 +23,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/index.ts

@@ -10,6 +10,7 @@ VantComponent({
     message: String,
     useSlot: Boolean,
     asyncClose: Boolean,
+    messageAlign: String,
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,

packages/dialog/index.wxml

@@ -17,7 +17,7 @@
   <slot wx:if="{{ useSlot }}" />
   <view
     wx:elif="{{ message }}"
-    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }}"
+    class="van-dialog__message {{ title ? 'van-dialog__message--has-title' : '' }} {{ messageAlign ? 'van-dialog__message--' + messageAlign : '' }}"
   >
     <text>{{ message }}</text>
   </view>