# 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插槽時有效) |
- 項目介紹
- 常見問題
- 開發環境準備
- 環境準備
- 啟動項目
- 切換Vue3路由
- 項目配置詳細說明
- 上線部署
- 快速構建&部署
- Docker鏡像啟動
- 項目配置
- 菜單配置
- 菜單緩存
- 積木報表菜單配置
- 首頁配置
- 國際化
- 菜單國際化
- 組件注冊
- 項目規范
- 跨域處理
- 樣式庫
- 圖標生成
- package依賴介紹
- 菜單TAB風格
- 備份文檔
- 詳細構建和配置
- 構建部署1.0
- 切換Mock接口
- 原生路由(作廢)
- 原生菜單(作廢)
- 頁面開啟緩存(作廢)
- 環境準備1.0
- 數據 mock&聯調
- UI組件
- Form 表單組件
- Table 表格
- Modal 彈窗
- Drawer 抽屜組件
- Icon 圖標組件
- Button 按鈕
- 更多基礎組件
- JSelectUser選擇用戶 ?
- JSelectPosition崗位選擇 ?
- JSelectDept部門選擇 ?
- JCheckbox ?
- JImportModal 列表導入彈窗組件
- JInput特殊查詢組件 ?
- JPopup彈窗選擇組件 ?
- JTreeSelect樹形下拉框 (異步加載) ?
- JAreaSelect 省市縣級聯組件
- JDictSelectTag 字典標簽 ?
- JEllipsis 超長截取顯示組件 ?
- JUpload 上傳組件 ?
- JEasyCron 定時表達式選擇組件 ?
- JInputPopup 多行輸入窗口組件 ?
- JSwitch 開關選擇組件 ?
- JTreeDict 分類字典樹形下拉組件 ?
- JSelectInput 可輸入下拉框 ?
- JEditor 富文本編輯器 ?
- JMarkdownEditor Markdown編輯器 ?
- JSearchSelect 字典表的搜索組件 ?
- JSelectUserByDept 根據部門選擇用戶 ?
- JVxeTable
- 組件配置文檔
- 自定義組件
- 封裝自定義組件
- 自定義組件增強
- 多級聯動配置
- 使用示例
- 常見問題解答
- JAreaLinkage 省市縣聯動組件 ?
- JCategorySelect 分類字典樹 ?
- JImageUpload 圖片上傳 ?
- JSelectMultiple 下拉多選 ?
- JSelectRole 選擇角色 ?
- JFormContainer 表單組件禁用 ?
- SuperQuery 高級查詢
- UserSelect 高級用戶選擇組件
- Basic
- Page
- Authority
- PopConfirmButton
- CollapseContainer
- ScrollContainer
- LazyContainer
- CodeEditor
- JsonPreview
- CountDown
- ClickOutSide
- CountTo
- Cropper
- Description
- FlowChart
- Upload
- Tree
- Excel
- Qrcode
- Markdown
- Loading
- Tinymce
- Time
- StrengthMeter
- Verify
- Transition
- VirtualScroll
- ContextMenu
- Preview
- Loading
- 前端權限
- 表單權限
- 顯隱控制 ?
- 禁用控制 ?
- 列表權限
- 按鈕權限控制
- 列字段顯隱控制
- 行編輯組件權限
- 顯隱控制
- 禁用控制
- 代碼生成
- Online在線代碼生成
- GUI代碼生成
- 代碼生成模板介紹
- vue3和vue3Native詳細說明
- 深入開發
- 定義Form新組件
- 自定義列表查詢
- 自定義表單布局
- 開發筆記
- 組件權限控制
- 使用Antd Vue原生Form
- 自定義圖表組件
- 自定義渲染函數
- 如何編寫mock接口
- 緩存用法
- 精簡版代碼制作
- 微前端(qiankun)集成
- 前端小技巧
- 表單整體禁用
- 彈框內下拉框錯位
- 界面如何設置響應式
- 抽屜(Drawer)寬度自適應
- 生成菜單腳本
- Online表單
- Online常見問題
- Online表單配置
- 配置參數說明
- 系統標準字段
- 表單類型-主子表|樹表
- 自定義查詢配置
- Online表單風格
- Online表單刪除說明
- Online聯合查詢配置
- online表單視圖功能說明
- Online表單開啟評論
- Online表單控件介紹
- 常用基礎控件
- 高級關聯記錄
- Online表單控件配置
- 基本配置
- 控件擴展配置
- 默認值表達式
- 自定義查詢配置
- 字段href
- 默認值(填值規則)
- 導入導出自定義規則
- Online表單權限配置
- 字段權限配置與授權
- 按鈕權限配置與授權
- 數據權限配置與授權
- 聯合查詢數據權限規則說明
- 在線增強
- 自定義按鈕
- SQL增強
- JS增強
- 按鈕觸發JS增強
- 列表Api
- 列表操作列前置事件
- 表單Api
- beforeSubmit事件
- loaded事件
- 表單值改變事件【單表/主表】
- 表單值改變事件【從表】
- 表單值改變事件【從改主】
- 控制字段顯示與隱藏
- js增強實現下拉聯動
- js增強控制下拉樹數據
- JS增強 觸發彈窗
- JS增強 http請求
- JS增強 方法定義
- 對接表單設計器后需注意
- JAVA增強
- 快速開始
- Online java增強 導入
- Online java增強 導出
- Online java增強 查詢
- Online Java增強 http-api
- 表單類
- 列表類
- 其他功能示例
- 導入數據庫表支持排除表
- 通過字段Href實現三級聯動
- excel數據導入支持校驗
- Online報表
- Online報表配置
- 配置成菜單
- 其他功能
- 推送消息
- ISO 8601書寫格式
- 系統消息跳轉至詳情表單
- 菜單【批量申請(自定義)】功能說明
- Online自動化測試
- online AI自動化測試數據制作
- Online AI自動化測試數據制作
- Online AI模型測試用例功能詳情
- JAVA后臺功能
- saas多租戶切換
- 新功能實現saas租戶隔離
- 第三方集成
- 敲敲云集成釘釘