# Drawer 抽屜組件 對`antv`的 drawer 組件進行封裝，擴展拖拽，全屏，自適應高度等功能。 [TOC] ## Usage **由于 drawer 內部代碼一般獨立成單獨文件，推薦獨立成組件來進行開發，所以示例都是以獨立的文件來進行說明** **獨立組件代碼，用于寫組件內部的內容** ~~~ <template> <BasicDrawer v-bind="$attrs" title="Drawer Title" width="50%"> Drawer Info. </BasicDrawer> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicDrawer } from '/@/components/Drawer'; export default defineComponent({ components: { BasicDrawer }, }); </script> ~~~ **頁面引用彈窗** ~~~ <template> <div> <Drawer @register="register" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { Alert } from 'ant-design-vue'; import { useDrawer } from '/@/components/Drawer'; import Drawer from './Drawer.vue'; export default defineComponent({ components: { Drawer }, setup() { const [register, { openDrawer }] = useDrawer(); return { register, openDrawer, }; }, }); </script> ~~~ ## useDrawer **useDrawer**用于操作組件 ~~~ const [register, { openDrawer, setDrawerProps }] = useDrawer(); ~~~ **register** register 用于注冊`useDrawer`，如果需要使用`useDrawer`提供的 api，必須將`register`傳入組件的`onRegister`。 原理其實很簡單，就是 vue 的組件子傳父通信，內部通過`emit("register"，instance)`實現。 同時，獨立出去的組件需要將`attrs`綁定到 Drawer 的上面。 ~~~ <BasicDrawer v-bind="$attrs"> Drawer Info. </BasicDrawer> ~~~ **openDrawer** 用于打開/關閉彈窗 ~~~ // true/false: 打開關閉彈窗 // data: 傳遞到子組件的數據 openDrawer(true, data); ~~~ **closeDrawer** 用于關閉彈窗 ~~~ closeDrawer(); ~~~ **setDrawerProps** 用于更改 drawer 的 props 參數因為 drawer 內容獨立成組件，如果在外部頁面需要更改 props 可能比較麻煩，所以提供**setDrawerProps**方便更改內部 drawer 的 props [Props](https://vvbin.cn/doc-next/components/drawer.html#Props)內容可以見下方 ~~~ setDrawerProps(props); ~~~ ## useDrawerInner 用于獨立的 Drawer 內部調用 ~~~ <template> <BasicDrawer v-bind="$attrs" @register="register" title="Drawer Title" width="50%"> Drawer Info. <a-button type="primary" @click="closeDrawer">內部關閉drawer</a-button> </BasicDrawer> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; export default defineComponent({ components: { BasicDrawer }, setup() { const [register, { closeDrawer }] = useDrawerInner(); return { register, closeDrawer }; }, }); </script> ~~~ **useModalInner**用于操作獨立組件 ~~~ const [register, { closeModal, setModalProps }] = useModalInner(callback); ~~~ **callback** type:`(data:any)=>void` 回調函數用于接收 openDrawer 第二個參數傳遞的值 ~~~ openDrawer((data: any) => { console.log(data); }); ~~~ **closeDrawer** 用于關閉抽屜 ~~~ closeDrawer(); ~~~ **changeOkLoading** 用于修改確認按鈕的 loading 狀態 ~~~ // true or false changeOkLoading(true); ~~~ **changeLoading** 用于修改 modal 的 loading 狀態 ~~~ // true or false changeLoading(true); ~~~ **setDrawerProps** 用于更改 drawer 的 props 參數因為 modal 內容獨立成組件，如果在外部頁面需要更改 props 可能比較麻煩，所以提供**setDrawerProps**方便更改內部 drawer 的 props [Props](https://vvbin.cn/doc-next/components/drawer.html#Props)內容可以見下方 ## Props 溫馨提醒 除以下參數外，官方文檔內的 props 也都支持，具體可以參考 [antv drawer](https://www.antdv.com/components/drawer-cn) | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | --- | --- | --- | --- | --- | | isDetail | `boolean` | `false` | \- | 是否為詳情模式 | | loading | `boolean` | `false` | \- | loading 狀態 | | loadingText | `string` | `` | \- | loading 文本 s | | showDetailBack | `boolean` | `true` | \- | isDetail=true 狀態下是否顯示返回按鈕 | | closeFunc | `() => Promise<boolean>` | \- | \- | 自定義關閉函數，返回`true`關閉，否則不關閉 | | showFooter | `boolean` | \- | \- | 是否顯示底部 | | footerHeight | `number` | `60` | \- | 底部區域高度 | ## Events | 事件 | 回調參數 | 說明 | | --- | --- | --- | | close | `(e)=>void` | 點擊關閉回調 | | visible-change | `(visible:boolean)=>void` | 彈窗打開關閉時觸發 | | ok | `(e)=>void` | 點擊確定回調 |