# Modal 彈窗 對 antv 的 modal 組件進行封裝，擴展拖拽，全屏，自適應高度等功能 代碼路徑 [src/components/Modal](https://github.com/jeecgboot/jeecgboot-vue3/tree/master/src/components/Modal) [TOC] ## Usage **由于彈窗內代碼一般作為單文件組件存在，也推薦這樣做，所以示例都為單文件組件形式** TIP 注意`v-bind="$attrs"`記得寫，用于將彈窗組件的`attribute`傳入`BasicModal`組件 ~~~ // Modal.vue <template> <BasicModal v-bind="$attrs" title="Modal Title" :helpMessage="['提示1', '提示2']"> Modal Info. </BasicModal> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicModal } from '/@/components/Modal'; export default defineComponent({ components: { BasicModal }, setup() { return {}; }, }); </script> ~~~ **頁面引用彈窗** ~~~ // Page.vue <template> <div class="px-10"> <Modal @register="register" /> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { useModal } from '/@/components/Modal'; import Modal from './Modal.vue'; export default defineComponent({ components: { Modal }, setup() { const [register, { openModal }] = useModal(); return { register, openModal, }; }, }); </script> ~~~ ## useModal 用于外部組件調用 **useModal**用于操作組件 ~~~ const [register, { openModal, setModalProps }] = useModal(); ~~~ **register** register 用于注冊`useModal`，如果需要使用`useModal`提供的 api，必須將`register`傳入組件的`onRegister`。 原理其實很簡單，就是 vue 的組件子傳父通信，內部通過`emit("register"，instance)`實現。 同時獨立出去的組件需要將`attrs`綁定到`BasicModal`上面。 ~~~ <template> <BasicModal v-bind="$attrs"></BasicModal> </template> ~~~ **openModal** 用于打開/關閉彈窗 ~~~ // true/false: 打開關閉彈窗 // data: 傳遞到子組件的數據 openModal(true, data); ~~~ **closeModal** 用于關閉彈窗 ~~~ closeModal(); ~~~ **setModalProps** 用于更改 modal 的 props 參數因為 modal 內容獨立成組件，如果在外部頁面需要更改 props 可能比較麻煩，所以提供**setModalProps**方便更改內部 modal 的 props [Props](https://vvbin.cn/doc-next/components/modal.html#Props)內容可以見下方 ~~~ setModalProps(props); ~~~ ## useModalInner 用于獨立的 Modal 內部調用 ### Usage ~~~ <template> <BasicModal v-bind="$attrs" @register="register" title="Modal Title" :helpMessage="['提示1', '提示2']" > <a-button type="primary" @click="closeModal" class="mr-2">從內部關閉彈窗</a-button> <a-button type="primary" @click="setModalProps">從內部修改title</a-button> </BasicModal> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { BasicModal, useModalInner } from '/@/components/Modal'; export default defineComponent({ components: { BasicModal }, setup() { const [register, { closeModal, setModalProps }] = useModalInner(); return { register, closeModal, setModalProps: () => { setModalProps({ title: 'Modal New Title' }); }, }; }, }); </script> ~~~ **useModalInner**用于操作獨立組件 ~~~ const [register, { closeModal, setModalProps }] = useModalInner(callback); ~~~ **callback** type:`(data:any)=>void` 回調函數用于接收 openModal 第二個參數傳遞的值 ~~~ useModal((data: any) => { console.log(data); }); ~~~ **closeModal** 用于關閉彈窗 ~~~ closeModal(); ~~~ **changeOkLoading** 用于修改確認按鈕的 loading 狀態 ~~~ changeOkLoading(true); ~~~ **changeLoading** 用于修改 modal 的 loading 狀態 ~~~ // true or false changeLoading(true); ~~~ **setModalProps** 用于更改 modal 的 props 參數因為 modal 內容獨立成組件，如果在外部頁面需要更改 props 可能比較麻煩，所以提供**setModalProps**方便更改內部 modal 的 props [Props](https://vvbin.cn/doc-next/components/modal.html#Props)內容可以見下方 ## Props TIP 除以下參數外，組件庫文檔內的 props 也都支持，具體可以參考[antv modal](https://2x.antdv.com/components/modal-cn/#API) | 屬性 | 類型 | 默認值 | 可選值 | 說明 | | --- | --- | --- | --- | --- | | title | `string` | \- | \- | modal 標題 | | height | `number` | \- | \- | 固定 modal 的高度 | | minHeight | `number` | \- | \- | 設置 modal 的最小高度 | | draggable | `boolean` | true | true/false | 是否開啟拖拽 | | useWrapper | `boolean` | true | true/false | 是否開啟自適應高度，開啟后會跟隨屏幕變化自適應內容，并出現滾動條 | | wrapperFooterOffset | `number` | 0 | \- | 開啟是適應高度后，如果超過屏幕高度，底部和頂部會保持一樣的間距，該參數可以用來縮小底部的間距 | | canFullscreen | `boolean` | true | true/false | 是否可以進行全屏 | | defaultFullscreen | `boolean` | false | true/false | 默認全屏 | | loading | `boolean` | false | true/false | loading 狀態 | | loadingTip | `string` | \- | \- | loading 文本 | | showCancelBtn | `boolean` | true | true/false | 顯示關閉按鈕 | | showOkBtn | `boolean` | true | true/false | 顯示確認按鈕 | | helpMessage | `string , string[]` | \- | \- | 標題右側提示文本 | | centered | `boolean` | false | true/false | 是否居中彈窗 | | cancelText | `string` | '關閉' | \- | 關閉按鈕文本 | | okText | `string` | '保存' | \- | 確認按鈕文本 | | closeFunc | () => Promise<boolean> | 關閉函數 | \- | 關閉前執行，返回 true 則關閉，否則不關閉 | ## Events | 事件 | 回調參數 | 說明 | | --- | --- | --- | | ok | `function(e)` | 點擊確定回調 | | cancel | `function(e)` | 點擊取消回調 | | visible-change | `(visible:boolean)=>{}` | 打開或者關閉觸發 | ## Slots | 名稱 | 說明 | | --- | --- | | default | 默認區域 | | footer | 底部區域(會替換掉默認的按鈕) | | insertFooter | 關閉按鈕的左邊(不使用footer插槽時有效) | | centerFooter | 關閉按鈕和確認按鈕的中間(不使用footer插槽時有效) | | appendFooter | 確認按鈕的右邊(不使用footer插槽時有效) |