Skip to content

Commit 3b790cb

Browse files
ajunerajuner
committed
refactor(drawer): use compositionAPI
1 parent 5a9d718 commit 3b790cb

22 files changed

+1335
-404
lines changed

‎components/drawer/demo/basic.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@ Basic drawer.
2222
v-model:visible="visible"
2323
title="Basic Drawer"
2424
placement="right"
25-
:closable="false"
26-
:after-visible-change="afterVisibleChange"
25+
@after-visible-change="afterVisibleChange"
2726
>
2827
<p>Some contents...</p>
2928
<p>Some contents...</p>

‎components/drawer/demo/extra.vue

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<docs>
2+
---
3+
order: 2
4+
title:
5+
zh-CN: 额外操作
6+
en-US: Extra Actions
7+
---
8+
9+
## zh-CN
10+
11+
在 Ant Design 规范中，操作按钮建议放在抽屉的右上角，可以使用 extra 属性来实现。
12+
13+
## en-US
14+
15+
Extra actions should be placed at corner of drawer in Ant Design, you can using `extra` prop for that.
16+
17+
</docs>
18+
19+
<template>
20+
<a-radio-group v-model:value="placement" style="margin-right: 8px">
21+
<a-radio value="top">top</a-radio>
22+
<a-radio value="right">right</a-radio>
23+
<a-radio value="bottom">bottom</a-radio>
24+
<a-radio value="left">left</a-radio>
25+
</a-radio-group>
26+
<a-button type="primary" @click="showDrawer">Open</a-button>
27+
<a-drawer
28+
:width="500"
29+
title="Basic Drawer"
30+
:placement="placement"
31+
:visible="visible"
32+
@close="onClose"
33+
>
34+
<template #extra>
35+
<a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
36+
<a-button type="primary" @click="onClose">Submit</a-button>
37+
</template>
38+
<p>Some contents...</p>
39+
<p>Some contents...</p>
40+
<p>Some contents...</p>
41+
</a-drawer>
42+
</template>
43+
<script lang="ts">
44+
import { defineComponent, ref } from 'vue';
45+
export default defineComponent({
46+
setup() {
47+
const placement = ref<string>('left');
48+
const visible = ref<boolean>(false);
49+
50+
const showDrawer = () => {
51+
visible.value = true;
52+
};
53+
54+
const onClose = () => {
55+
visible.value = false;
56+
};
57+
return {
58+
placement,
59+
visible,
60+
showDrawer,
61+
onClose,
62+
};
63+
},
64+
});
65+
</script>

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

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<docs>
22
---
3-
order: 3
3+
order: 4
44
title:
55
zh-CN: 抽屉表单
66
en-US: Submit form in drawer
@@ -26,6 +26,7 @@ Use form in drawer with submit button.
2626
:width="720"
2727
:visible="visible"
2828
:body-style="{ paddingBottom: '80px' }"
29+
:footer-style="{ textAlign: 'right' }"
2930
@close="onClose"
3031
>
3132
<a-form :model="form" :rules="rules" layout="vertical">
@@ -96,22 +97,10 @@ Use form in drawer with submit button.
9697
</a-col>
9798
</a-row>
9899
</a-form>
99-
<div
100-
:style="{
101-
position: 'absolute',
102-
right: 0,
103-
bottom: 0,
104-
width: '100%',
105-
borderTop: '1px solid #e9e9e9',
106-
padding: '10px 16px',
107-
background: '#fff',
108-
textAlign: 'right',
109-
zIndex: 1,
110-
}"
111-
>
100+
<template #footer>
112101
<a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
113102
<a-button type="primary" @click="onClose">Submit</a-button>
114-
</div>
103+
</template>
115104
</a-drawer>
116105
</template>
117106
<script lang="ts">

‎components/drawer/demo/index.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
<template>
22
<demo-sort>
33
<basic />
4+
<extra />
45
<placement />
56
<render-in-current />
67
<form-in-drawer />
78
<user-profile />
89
<multi-level-drawer />
10+
<size />
911
</demo-sort>
1012
</template>
1113
<script lang="ts">
1214
import Basic from './basic.vue';
15+
import Extra from './extra.vue';
1316
import Placement from './placement.vue';
1417
import UserProfile from './user-profile.vue';
1518
import MultiLevelDrawer from './multi-level-drawer.vue';
1619
import FormInDrawer from './form-in-drawer.vue';
1720
import RenderInCurrent from './render-in-current.vue';
21+
import Size from './size.vue';
1822
1923
import CN from '../index.zh-CN.md';
2024
import US from '../index.en-US.md';
@@ -25,11 +29,13 @@ export default defineComponent({
2529
US,
2630
components: {
2731
Basic,
32+
Extra,
2833
Placement,
2934
UserProfile,
3035
MultiLevelDrawer,
3136
FormInDrawer,
3237
RenderInCurrent,
38+
Size,
3339
},
3440
setup() {
3541
return {};

‎components/drawer/demo/multi-level-drawer.vue

Lines changed: 25 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,24 @@
11
<docs>
22
---
3-
order: 5
3+
order: 6
4+
title:
5+
zh-CN: 多层抽屉
6+
en-US: Multi-level drawer
7+
---
8+
9+
## zh-CN
10+
11+
在抽屉内打开新的抽屉，用以解决多分支任务的复杂状况。
12+
13+
## en-US
14+
15+
Open a new drawer on top of an existing drawer to handle multi branch tasks.
16+
17+
</docs>
18+
19+
<docs>
20+
---
21+
order: 6
422
title:
523
zh-CN: 多层抽屉
624
en-US: Multi-level drawer
@@ -22,35 +40,24 @@ Open a new drawer on top of an existing drawer to handle multi branch tasks.
2240
title="Multi-level drawer"
2341
width="520"
2442
:closable="false"
25-
:visible="visible"
43+
v-model:visible="visible"
44+
:footer-style="{ textAlign: 'right' }"
2645
@close="onClose"
2746
>
2847
<a-button type="primary" @click="showChildrenDrawer">Two-level drawer</a-button>
2948
<a-drawer
3049
title="Two-level Drawer"
3150
width="320"
3251
:closable="false"
33-
:visible="childrenDrawer"
34-
@close="onChildrenDrawerClose"
52+
v-model:visible="childrenDrawer"
3553
>
3654
<a-button type="primary" @click="showChildrenDrawer">This is two-level drawer</a-button>
3755
</a-drawer>
38-
<div
39-
:style="{
40-
position: 'absolute',
41-
bottom: 0,
42-
width: '100%',
43-
borderTop: '1px solid #e8e8e8',
44-
padding: '10px 16px',
45-
textAlign: 'right',
46-
left: 0,
47-
background: '#fff',
48-
borderRadius: '0 0 4px 4px',
49-
}"
50-
>
56+
57+
<template #footer>
5158
<a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
5259
<a-button type="primary" @click="onClose">Submit</a-button>
53-
</div>
60+
</template>
5461
</a-drawer>
5562
</template>
5663
<script lang="ts">
@@ -71,16 +78,12 @@ export default defineComponent({
7178
const showChildrenDrawer = () => {
7279
childrenDrawer.value = true;
7380
};
74-
const onChildrenDrawerClose = () => {
75-
childrenDrawer.value = false;
76-
};
7781
return {
7882
visible,
7983
childrenDrawer,
8084
showDrawer,
8185
onClose,
8286
showChildrenDrawer,
83-
onChildrenDrawerClose,
8487
};
8588
},
8689
});

‎components/drawer/demo/render-in-current.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<docs>
22
---
3-
order: 2
3+
order: 3
44
title:
55
zh-CN: 渲染在当前 DOM
66
en-US: Render in current dom
@@ -40,7 +40,7 @@ Render in current dom. custom container, check getContainer.
4040
:closable="false"
4141
:visible="visible"
4242
:get-container="false"
43-
:wrap-style="{ position: 'absolute' }"
43+
:style="{ position: 'absolute' }"
4444
@close="onClose"
4545
>
4646
<p>Some contents...</p>

‎components/drawer/demo/size.vue

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<docs>
2+
---
3+
order: 7
4+
title:
5+
zh-CN: 预设宽度
6+
en-US: Presetted size
7+
---
8+
9+
## zh-CN
10+
11+
抽屉的默认宽度为 `378px`，另外还提供一个大号抽屉 `736px`，可以用 size 属性来设置。
12+
13+
## en-US
14+
15+
The default width (or height) of Drawer is `378px`, and there is a presetted large size `736px`.
16+
17+
</docs>
18+
19+
<template>
20+
<a-button type="primary" @click="showDrawer('default')">Open Default Size (378px)</a-button>
21+
<a-button type="primary" @click="showDrawer('large')">Open Large Size (736px)</a-button>
22+
<a-drawer
23+
title="Basic Drawer"
24+
:size="size"
25+
:placement="placement"
26+
:visible="visible"
27+
@close="onClose"
28+
>
29+
<template #extra>
30+
<a-button style="margin-right: 8px" @click="onClose">Cancel</a-button>
31+
<a-button type="primary" @click="onClose">Submit</a-button>
32+
</template>
33+
<p>Some contents...</p>
34+
<p>Some contents...</p>
35+
<p>Some contents...</p>
36+
</a-drawer>
37+
</template>
38+
<script lang="ts">
39+
import { defineComponent, ref } from 'vue';
40+
export default defineComponent({
41+
setup() {
42+
const visible = ref<boolean>(false);
43+
const size = ref<string>('default');
44+
45+
const showDrawer = (val: string) => {
46+
size.value = val;
47+
visible.value = true;
48+
};
49+
50+
const onClose = () => {
51+
visible.value = false;
52+
};
53+
return {
54+
visible,
55+
size,
56+
showDrawer,
57+
onClose,
58+
};
59+
},
60+
});
61+
</script>

‎components/drawer/demo/user-profile.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<docs>
22
---
3-
order: 4
3+
order: 5
44
title:
55
zh-CN: 信息预览抽屉
66
en-US: Preview drawer

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

Lines changed: 29 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -15,34 +15,41 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
1515
- Processing subtasks. When subtasks are too heavy for a Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy.
1616
- When the same Form is needed in multiple places.
1717

18-
1918
## API
2019

21-
| Property | Description | Type | Default | Version |
22-
| --- | --- | --- | --- | --- |
23-
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true | |
24-
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false | |
25-
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | |
26-
| mask | Whether to show mask or not. | Boolean | true | |
27-
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true | |
28-
| maskStyle | Style for Drawer's mask element. | object | {} | |
29-
| title | The title for Drawer. | string\|slot | - | |
30-
| visible(v-model) | Whether the Drawer dialog is visible or not. | boolean | false | |
31-
| wrapClassName | The class name of the container of the Drawer dialog. | string | - | |
32-
| wrapStyle | Style of wrapper element which **contains mask** compare to `drawerStyle` | object | - | |
20+
| Props | Description | Type | Default | Version |
21+
| --- | --- | --- | --- | --- | --- |
22+
| autoFocus | Whether Drawer should get focused after open | boolean | true | 3.0.0 |
23+
| bodyStyle | Style of the drawer content part | CSSProperties | - | |
24+
| className(old: wrapClassName) | The class name of the container of the Drawer dialog | string | - | 3.0.0 |
25+
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true | |
26+
| closeIcon | Custom close icon | VNode \| slot | <CloseOutlined /> | 3.0.0 |
27+
| contentWrapperStyle | Style of the drawer wrapper of content part | CSSProperties | 3.0.0 |
28+
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | |
3329
| drawerStyle | Style of the popup layer element | object | - | |
34-
| headerStyle | Style of the drawer header part | object | - | |
35-
| bodyStyle | Style of the drawer content part | object | - | |
36-
| width | Width of the Drawer dialog. | string\|number | 256 | |
37-
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - | |
38-
| zIndex | The `z-index` of the Drawer. | Number | 1000 | |
39-
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | |
40-
| handle | After setting, the drawer is directly mounted on the DOM, and you can control the drawer to open or close through this `handle`. | VNode \| slot | - | |
41-
| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - | |
42-
| keyboard | Whether support press esc to close | Boolean | true | |
30+
| extra | Extra actions area at corner | VNode \| slot | - | 3.0.0 |
31+
| footer | The footer for Drawer | VNode \| slot | - | 3.0.0 |
32+
| footerStyle | Style of the drawer footer part | CSSProperties | - | 3.0.0 |
33+
| forceRender | Prerender Drawer component forcely | boolean | - | false | 3.0.0 |
34+
| getContainer | Return the mounted node for Drawer | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | |
35+
| headerStyle | Style of the drawer header part | CSSProperties | - | 3.0.0 |
36+
| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 378 | |
37+
| keyboard | Whether support press esc to close | boolean | true | |
38+
| mask | Whether to show mask or not | Boolean | true | |
39+
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | |
40+
| maskStyle | Style for Drawer's mask element | CSSProperties | {} | |
41+
| placement | The placement of the Drawer | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | |
42+
| push | Nested drawers push behavior | boolean \| {distance: string \| number} | { distance: 180} | 3.0.0 |
43+
| size | presetted size of drawer, default `378px` and large `736px` | `default` \| `large` | `default` | 3.0.0 |
44+
| style(old: wrapStyle) | Style of wrapper element which contains mask compare to drawerStyle | CSSProperties | - | 3.0.0 |
45+
| title | The title for Drawer | string \| slot | - | |
46+
| visible(v-model) | Whether the Drawer dialog is visible or not | boolean | - | |
47+
| width | Width of the Drawer dialog | string \| number | 378 | |
48+
| zIndex | The `z-index` of the Drawer | Number | 1000 | |
4349

4450
## Methods
4551

4652
| Name | Description | Type | Default | Version |
4753
| --- | --- | --- | --- | --- |
54+
| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - | |
4855
| close | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - | |

0 commit comments

Comments
 (0)