blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
neverland 2019-10-11 10:13:33 +08:00 committed by GitHub
parent 894e9aafcb
commit cc162ecd7b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/dialog/Dialog.js
View File

@ -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}

2
src/dialog/README.md
View File

@ -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` | - |

2
src/dialog/README.zh-CN.md
View File

@ -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` | - |

1
src/dialog/index.js
View File

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

11
src/dialog/test/index.spec.js
View File

@ -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');
});

1
types/dialog.d.ts vendored
View File

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