diff --git a/packages/dialog/README.md b/packages/dialog/README.md index 2de0bf2e..1cfce962 100644 --- a/packages/dialog/README.md +++ b/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* | '' | diff --git a/packages/dialog/dialog.ts b/packages/dialog/dialog.ts index eab858d3..da3596b1 100644 --- a/packages/dialog/dialog.ts +++ b/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, diff --git a/packages/dialog/index.ts b/packages/dialog/index.ts index 4ce6184a..e8195b77 100644 --- a/packages/dialog/index.ts +++ b/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) + }); } } }); diff --git a/packages/dialog/index.wxml b/packages/dialog/index.wxml index fb233072..854e8a14 100644 --- a/packages/dialog/index.wxml +++ b/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"