feat(Dialog): add width prop (#2141)

packages/dialog/README.md

@@ -133,6 +133,7 @@ Page({
 | 参数 | 说明 | 类型 | 默认值 | 版本 | 
 |-----------|-----------|-----------|-------------|-------------|
 | title | 标题 | *string* | - | - |
+| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 1.0.0 |
 | message | 文本内容，支持通过`\n`换行 | *string* | - | 1.0.0 |
 | messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` | - |
 | zIndex | z-index 层级 | *number* | `100` | - |
@@ -174,7 +175,8 @@ Page({
 |-----------|-----------|-----------|-------------|
 | show | 是否显示弹窗 | *boolean* | - |
 | title | 标题 | *string* | - |
-| message | 内容 | *string* | - |
+| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 1.0.0 |
+| message | 文本内容，支持通过`\n`换行 | *string* | - |
 | message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` |
 | z-index | z-index 层级 | *number* | `100` |
 | class-name | 自定义类名，dialog在自定义组件内时无效 | *string* | '' |

packages/dialog/dialog.ts

@@ -5,6 +5,7 @@ type DialogOptions = {
   lang?: string;
   show?: boolean;
   title?: string;
+  width?: string | number;
   zIndex?: number;
   context?: WechatMiniprogram.Page.TrivialInstance | WechatMiniprogram.Component.TrivialInstance;
   message?: string;
@@ -79,6 +80,7 @@ const Dialog: Dialog = options => {
 Dialog.defaultOptions = {
   show: true,
   title: '',
+  width: null,
   message: '',
   zIndex: 100,
   overlay: true,

packages/dialog/index.ts

@@ -1,6 +1,7 @@
 import { VantComponent } from '../common/component';
 import { button } from '../mixins/button';
 import { openType } from '../mixins/open-type';
+import { addUnit } from '../common/utils';
 import { GRAY, BLUE } from '../common/color';
 
 type Action = 'confirm' | 'cancel' | 'overlay';
@@ -22,6 +23,10 @@ VantComponent({
     showCancelButton: Boolean,
     closeOnClickOverlay: Boolean,
     confirmButtonOpenType: String,
+    width: {
+      type: null,
+      observer: 'setWidthWithUnit'
+    },
     zIndex: {
       type: Number,
       value: 2000
@@ -120,6 +125,12 @@ VantComponent({
       if (callback) {
         callback(this);
       }
+    },
+
+    setWidthWithUnit(val) {
+      this.setData({
+        widthWithUnit: addUnit(val)
+      });
     }
   }
 });

packages/dialog/index.wxml

@@ -4,7 +4,7 @@
   overlay="{{ overlay }}"
   transition="{{ transition }}"
   custom-class="van-dialog {{ className }}"
-  custom-style="{{ customStyle }}"
+  custom-style="{{ widthWithUnit ? 'width: ' + widthWithUnit + ';' : '' }}{{ customStyle }}"
   overlay-style="{{ overlayStyle }}"
   close-on-click-overlay="{{ closeOnClickOverlay }}"
   bind:close="onClickOverlay"