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

src/dialog/Dialog.js

@@ -1,4 +1,4 @@
-import { createNamespace } from '../utils';
+import { createNamespace, addUnit } from '../utils';
 import { BORDER_TOP, BORDER_LEFT } from '../utils/constant';
 import { PopupMixin } from '../mixins/popup';
 import { CloseOnPopstateMixin } from '../mixins/close-on-popstate';
@@ -11,6 +11,7 @@ export default createComponent({
 
   props: {
     title: String,
+    width: [Number, String],
     message: String,
     className: null,
     callback: Function,
@@ -153,6 +154,7 @@ export default createComponent({
           role="dialog"
           aria-labelledby={this.title || message}
           class={[bem(), this.className]}
+          style={{ width: addUnit(this.width) }}
         >
           {Title}
           {Content}

src/dialog/README.md

@@ -119,6 +119,7 @@ export default {
 | Attribute | Description | Type | Default | Version |
 |------|------|------|------|------|
 | title | Title | *string* | - | - |
+| width | Width | *string \| number* | `320px` | 2.2.7 |
 | message | Message | *string* | - | - |
 | messageAlign | Message text align，can be set to `left` `right` | *string* | `center` | - |
 | className | Custom className | *any* | - | - |
@@ -144,6 +145,7 @@ export default {
 |------|------|------|------|------|
 | v-model | Whether to show dialog | *boolean* | - | - |
 | title | Title | *string* | - | - |
+| width | Width | *string \| number* | `320px` | 2.2.7 |
 | message | Message | *string* | - | - |
 | message-align | Message align，can be set to `left` `right` | *string* | `center` | - |
 | show-confirm-button | Whether to show confirm button | *boolean* |  `true` | - |

src/dialog/README.zh-CN.md

@@ -148,6 +148,7 @@ export default {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |------|------|------|------|------|
 | title | 标题 | *string* | - | - |
+| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 2.2.7 |
 | message | 文本内容，支持通过`\n`换行 | *string* | - | - |
 | messageAlign | 内容对齐方式，可选值为`left` `right` | *string* | `center` | - |
 | className | 自定义类名 | *any* | - | - |
@@ -175,6 +176,7 @@ export default {
 |------|------|------|------|------|
 | v-model | 是否显示弹窗 | *boolean* | - | - |
 | title | 标题 | *string* | - | - |
+| width | 弹窗宽度，默认单位为`px` | *string \| number* | `320px` | 2.2.7 |
 | message | 文本内容，支持通过`\n`换行 | *string* | - | - |
 | message-align | 内容对齐方式，可选值为`left` `right` | *string* | `center` | - |
 | show-confirm-button | 是否展示确认按钮 | *boolean* |  `true` | - |

src/dialog/index.js

@@ -47,6 +47,7 @@ function Dialog(options) {
 Dialog.defaultOptions = {
   value: true,
   title: '',
+  width: '',
   message: '',
   overlay: true,
   className: '',

src/dialog/test/index.spec.js

@@ -134,3 +134,14 @@ test('open & close event', () => {
   wrapper.vm.value = false;
   expect(wrapper.emitted('close')).toBeTruthy();
 });
+
+test('width prop', () => {
+  const wrapper = mount(DialogComponent, {
+    propsData: {
+      value: true,
+      width: 200
+    }
+  });
+
+  expect(wrapper.element.style.width).toEqual('200px');
+});

types/dialog.d.ts

@@ -3,6 +3,7 @@ type DialogDone = (close?: boolean) => void;
 
 export type DialogOptions = {
   title?: string;
+  width?: string | number;
   message?: string;
   overlay?: boolean;
   className?: any;