Skip to content

Commit 3534e7d

Browse files
tangjinzhoutangjinzhou
committed
fix: drawer style to wrapStyle
1 parent 9ecc5e1 commit 3534e7d

File tree

7 files changed

+178
-9
lines changed

7 files changed

+178
-9
lines changed

‎components/drawer/__tests__/MultiDrawer.test.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -133,7 +133,7 @@ describe('Drawer', () => {
133133
wrapper.find('#open_two_drawer').trigger('click')
134134
}, 0)
135135
await asyncExpect(() => {
136-
const translateX = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
136+
const translateX = wrapper.find('.ant-drawer.test_drawer').element.style.transform
137137
expect(translateX).toEqual('translateX(-180px)')
138138
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
139139
}, 1000)
@@ -154,7 +154,7 @@ describe('Drawer', () => {
154154
wrapper.find('#open_two_drawer').trigger('click')
155155
}, 0)
156156
await asyncExpect(() => {
157-
const translateX = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
157+
const translateX = wrapper.find('.ant-drawer.test_drawer').element.style.transform
158158
expect(translateX).toEqual('translateX(180px)')
159159
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
160160
}, 1000)
@@ -174,7 +174,7 @@ describe('Drawer', () => {
174174
wrapper.find('#open_two_drawer').trigger('click')
175175
}, 0)
176176
await asyncExpect(() => {
177-
const translateY = wrapper.find('.ant-drawer.test_drawer').element.parentElement.style.transform
177+
const translateY = wrapper.find('.ant-drawer.test_drawer').element.style.transform
178178
expect(translateY).toEqual('translateY(180px)')
179179
expect(wrapper.find('#two_drawer_text').exists()).toBe(true)
180180
}, 1000)

‎components/drawer/__tests__/__snapshots__/demo.test.js.snap

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,15 @@ exports[`renders ./components/drawer/demo/basic-right.md correctly 1`] = `
66
</div>
77
`;
88

9+
exports[`renders ./components/drawer/demo/form-in-drawer.md correctly 1`] = `
10+
<div><button type="button" class="ant-btn ant-btn-primary"><i class="anticon anticon-plus"><svg viewBox="64 64 896 896" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="">
11+
<path d="M848 474H550V152h-76v322H176c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h298v322h76V550h298c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"></path>
12+
</svg></i> New account
13+
</button>
14+
<!---->
15+
</div>
16+
`;
17+
918
exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] = `
1019
<div><button type="button" class="ant-btn ant-btn-primary"><span>Open</span></button>
1120
<!---->

‎components/drawer/__tests__/demo.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
import demoTest from '../../../tests/shared/demoTest'
22

3-
demoTest('drawer', { skip: ['from-drawer.md'] })
3+
demoTest('drawer')

‎components/drawer/demo/form-in-drawer.md

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
<cn>
2+
#### 抽屉表单
3+
在抽屉中使用表单。
4+
</cn>
5+
6+
<us>
7+
#### Submit form in drawer
8+
Use form in drawer with submit button.
9+
</us>
10+
11+
```html
12+
<template>
13+
<div>
14+
<a-button type="primary" @click="showDrawer">
15+
<a-icon type="plus" /> New account
16+
</a-button>
17+
<a-drawer
18+
title="Create a new account"
19+
:width="720"
20+
@close="onClose"
21+
:visible="visible"
22+
:wrapStyle="{height: 'calc(100% - 108px)',overflow: 'auto',paddingBottom: '108px'}"
23+
>
24+
<a-form :form="form" layout="vertical" hideRequiredMark>
25+
<a-row :gutter="16">
26+
<a-col :span="12">
27+
<a-form-item label="Name">
28+
<a-input
29+
v-decorator="['name', {
30+
rules: [{ required: true, message: 'Please enter user name' }]
31+
}]"
32+
placeholder="Please enter user name"
33+
/>
34+
</a-form-item>
35+
</a-col>
36+
<a-col :span="12">
37+
<a-form-item label="Url">
38+
<a-input
39+
v-decorator="['url', {
40+
rules: [{ required: true, message: 'please enter url' }]
41+
}]"
42+
style="width: 100%"
43+
addonBefore="http://"
44+
addonAfter=".com"
45+
placeholder="please enter url"
46+
/>
47+
</a-form-item>
48+
</a-col>
49+
</a-row>
50+
<a-row :gutter="16">
51+
<a-col :span="12">
52+
<a-form-item label="Owner">
53+
<a-select
54+
v-decorator="['owner', {
55+
rules: [{ required: true, message: 'Please select an owner' }]
56+
}]"
57+
placeholder="Please a-s an owner"
58+
>
59+
<a-select-option value="xiao">Xiaoxiao Fu</a-select-option>
60+
<a-select-option value="mao">Maomao Zhou</a-select-option>
61+
</a-select>
62+
</a-form-item>
63+
</a-col>
64+
<a-col :span="12">
65+
<a-form-item label="Type">
66+
<a-select
67+
v-decorator="['type', {
68+
rules: [{ required: true, message: 'Please choose the type' }]
69+
}]"
70+
placeholder="Please choose the type"
71+
>
72+
<a-select-option value="private">Private</a-select-option>
73+
<a-select-option value="public">Public</a-select-option>
74+
</a-select>
75+
</a-form-item>
76+
</a-col>
77+
</a-row>
78+
<a-row :gutter="16">
79+
<a-col :span="12">
80+
<a-form-item label="Approver">
81+
<a-select
82+
v-decorator="['approver', {
83+
rules: [{ required: true, message: 'Please choose the approver' }]
84+
}]"
85+
placeholder="Please choose the approver"
86+
>
87+
<a-select-option value="jack">Jack Ma</a-select-option>
88+
<a-select-option value="tom">Tom Liu</a-select-option>
89+
</a-select>
90+
</a-form-item>
91+
</a-col>
92+
<a-col :span="12">
93+
<a-form-item label="DateTime">
94+
<a-date-picker
95+
v-decorator="['dateTime', {
96+
rules: [{ required: true, message: 'Please choose the dateTime' }]
97+
}]"
98+
style="width: 100%"
99+
:getPopupContainer="trigger => trigger.parentNode"
100+
/>
101+
</a-form-item>
102+
</a-col>
103+
</a-row>
104+
<a-row :gutter="16">
105+
<a-col :span="24">
106+
<a-form-item label="Description">
107+
<a-textarea
108+
v-decorator="['description', {
109+
rules: [{ required: true, message: 'Please enter url description' }]
110+
}]"
111+
:rows="4"
112+
placeholder="please enter url description"
113+
/>
114+
</a-form-item>
115+
</a-col>
116+
</a-row>
117+
</a-form>
118+
<div
119+
:style="{
120+
position: 'absolute',
121+
left: 0,
122+
bottom: 0,
123+
width: '100%',
124+
borderTop: '1px solid #e9e9e9',
125+
padding: '10px 16px',
126+
background: '#fff',
127+
textAlign: 'right',
128+
}"
129+
>
130+
<a-button
131+
:style="{marginRight: '8px'}"
132+
@click="onClose"
133+
>
134+
Cancel
135+
</a-button>
136+
<a-button @click="onClose" type="primary">Submit</a-button>
137+
</div>
138+
</a-drawer>
139+
</div>
140+
</template>
141+
<script>
142+
export default {
143+
data() {
144+
return {
145+
form: this.$form.createForm(this),
146+
visible: false,
147+
}
148+
},
149+
methods: {
150+
showDrawer() {
151+
this.visible = true
152+
},
153+
onClose() {
154+
this.visible = false
155+
},
156+
},
157+
}
158+
</script>
159+
```

‎components/drawer/demo/index.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import BasicRight from './basic-right'
33
import Placement from './placement'
44
import UserProfile from './user-profile'
55
import MultiLevelDrawer from './multi-level-drawer'
6-
import FromDrawer from './from-drawer'
6+
import FormInDrawer from './form-in-drawer'
77
// import CustomPaging from './customPaging'
88
// import CustomArrows from './customArrows'
99
@@ -50,7 +50,7 @@ export default {
5050
<md cn={md.cn} us={md.us} />
5151
<BasicRight />
5252
<Placement />
53-
<FromDrawer />
53+
<FormInDrawer />
5454
<UserProfile />
5555
<MultiLevelDrawer />
5656
<api>

‎components/drawer/index.en-US.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@
55
| --- | --- | --- | --- |
66
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
77
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
8-
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| selectors | 'body' |
8+
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
99
| mask | Whether to show mask or not. | Boolean | true |
1010
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
1111
| maskStyle | Style for Drawer's mask element. | object | {} |
1212
| title | The title for Drawer. | string\|slot | - |
1313
| visible | Whether the Drawer dialog is visible or not. | boolean | false |
1414
| wrapClassName | The class name of the container of the Drawer dialog. | string | - |
15+
| wrapStyle | The style of the container of the Drawer dialog. | object | - |
1516
| width | Width of the Drawer dialog. | string\|number | 256 |
1617
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - |
17-
| className | The class name of the container of the Drawer dialog. | string | - |
1818
| zIndex | The `z-index` of the Drawer. | Number | 1000 |
1919
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' |
2020

‎components/drawer/index.zh-CN.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,14 @@
44
| --- | --- | --- | --- |
55
| closable | 是否显示右上角的关闭按钮 | boolean | true |
66
| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |
7-
| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| selectors | 'body' |
7+
| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
88
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
99
| mask | 是否展示遮罩 | Boolean | true |
1010
| maskStyle | 遮罩样式 | object | {} |
1111
| title | 标题 | string \| slot | - |
1212
| visible | Drawer 是否可见 | boolean | - |
1313
| wrapClassName | 对话框外层容器的类名 | string | - |
14+
| wrapStyle | 对话框外层容器的`style` | object | - |
1415
| width | 宽度 | string \| number | 256 |
1516
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
1617
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 |

0 commit comments

Comments
 (0)