提交 | 用户 | age
|
2f6253
|
1 |
<template> |
31ff05
|
2 |
<PageWrapper title="抽屉组件使用示例"> |
28f7f7
|
3 |
<Alert message="使用 useDrawer 进行抽屉操作" show-icon /> |
V |
4 |
<a-button type="primary" class="my-4" @click="openDrawerLoading">打开Drawer</a-button> |
2f6253
|
5 |
|
ebf7c8
|
6 |
<Alert message="内外同时控制显示隐藏" show-icon /> |
V |
7 |
<a-button type="primary" class="my-4" @click="openDrawer2(true)">打开Drawer</a-button> |
28f7f7
|
8 |
<Alert message="自适应高度/显示footer" show-icon /> |
ebf7c8
|
9 |
<a-button type="primary" class="my-4" @click="openDrawer3(true)">打开Drawer</a-button> |
2f6253
|
10 |
|
陈 |
11 |
<Alert |
|
12 |
message="内外数据交互,外部通过 transferModalData 发送,内部通过 receiveDrawerDataRef 接收。该数据具有响应式" |
|
13 |
show-icon |
|
14 |
/> |
28f7f7
|
15 |
<a-button type="primary" class="my-4" @click="send">打开Drawer并传递数据</a-button> |
V |
16 |
<Alert message="详情页模式" show-icon /> |
ebf7c8
|
17 |
<a-button type="primary" class="my-4" @click="openDrawer5(true)">打开详情Drawer</a-button> |
2f6253
|
18 |
<Drawer1 @register="register1" /> |
陈 |
19 |
<Drawer2 @register="register2" /> |
|
20 |
<Drawer3 @register="register3" /> |
|
21 |
<Drawer4 @register="register4" /> |
|
22 |
<Drawer5 @register="register5" /> |
31ff05
|
23 |
</PageWrapper> |
2f6253
|
24 |
</template> |
陈 |
25 |
<script lang="ts"> |
|
26 |
import { defineComponent } from 'vue'; |
|
27 |
import { Alert } from 'ant-design-vue'; |
|
28 |
import { useDrawer } from '/@/components/Drawer'; |
|
29 |
import Drawer1 from './Drawer1.vue'; |
|
30 |
import Drawer2 from './Drawer2.vue'; |
|
31 |
import Drawer3 from './Drawer3.vue'; |
|
32 |
import Drawer4 from './Drawer4.vue'; |
|
33 |
import Drawer5 from './Drawer5.vue'; |
31ff05
|
34 |
import { PageWrapper } from '/@/components/Page'; |
2f6253
|
35 |
|
陈 |
36 |
export default defineComponent({ |
31ff05
|
37 |
components: { Alert, PageWrapper, Drawer1, Drawer2, Drawer3, Drawer4, Drawer5 }, |
2f6253
|
38 |
setup() { |
陈 |
39 |
const [register1, { openDrawer: openDrawer1, setDrawerProps }] = useDrawer(); |
|
40 |
const [register2, { openDrawer: openDrawer2 }] = useDrawer(); |
|
41 |
const [register3, { openDrawer: openDrawer3 }] = useDrawer(); |
b6d5e5
|
42 |
const [ |
V |
43 |
register4, |
|
44 |
{ |
|
45 |
openDrawer: openDrawer4, |
|
46 |
// ransferDrawerData |
|
47 |
}, |
|
48 |
] = useDrawer(); |
2f6253
|
49 |
const [register5, { openDrawer: openDrawer5 }] = useDrawer(); |
陈 |
50 |
function send() { |
b6d5e5
|
51 |
// transferDrawerData({ |
V |
52 |
// data: 'content', |
|
53 |
// info: 'Info', |
|
54 |
// }); |
|
55 |
openDrawer4(true, { |
2f6253
|
56 |
data: 'content', |
陈 |
57 |
info: 'Info', |
|
58 |
}); |
|
59 |
} |
|
60 |
function openDrawerLoading() { |
|
61 |
openDrawer1(); |
|
62 |
setDrawerProps({ loading: true }); |
|
63 |
setTimeout(() => { |
|
64 |
setDrawerProps({ loading: false }); |
|
65 |
}, 2000); |
|
66 |
} |
|
67 |
return { |
|
68 |
register1, |
|
69 |
openDrawer1, |
|
70 |
register2, |
|
71 |
openDrawer2, |
|
72 |
register3, |
|
73 |
openDrawer3, |
|
74 |
register4, |
|
75 |
register5, |
|
76 |
openDrawer5, |
|
77 |
send, |
|
78 |
openDrawerLoading, |
|
79 |
}; |
|
80 |
}, |
|
81 |
}); |
|
82 |
</script> |