| 提交 | 用户 | 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> | |
