## Modal 對話框 提交表單/觸發業務邏輯確認操作等場景使用。  ### 代碼示例 基礎用法 ```html <cvu-modal v-model="modal.show" :title="modal.title" @on-cancel="handleCancel" @on-ok="handleConfirm" @on-visible-change="visibleChange" > <div>對話框內容</div> </cvu-modal> ``` ```jaavscript export default { data () { return { modal: { title: '標題', show: false } } }, mounted () { }, methods: { handleShowModal() { this.modal.show = true }, // 顯示狀態監聽 visibleChange(e) { // console.log(e) }, // 取消回調 handleCancel() { }, // 確定回調 handleConfirm() { } } } ``` 垂直居中 >[info] 設置`at-center`屬性為`true`，對話框顯示在屏幕中心位置  ```html <cvu-modal v-model="modal.show" :at-center="true" > <div>對話框內容</div> </cvu-modal> ``` 自定義樣式 >[info] 通過header、close、footer等插槽自定義對話框頭部、關閉按鈕、底部  ```html <cvu-modal v-model="modal.show" :title="modal.title" width="360" > <p slot="header" style="color:#f60;text-align:center"> <Icon type="ios-information-circle"></Icon> <span>Delete confirmation</span> </p> <div style="text-align:center"> <p>After this task is deleted, the downstream 10 tasks will not be implemented.</p> <p>Will you delete it?</p> </div> <div slot="footer"> <Button type="error" size="large" long :loading="modal_loading" @click="del">Delete</Button> </div> </cvu-modal> ``` 異步關閉對話框 >[info] 給`Modal`添加屬性`loading`后，點擊確定按鈕對話框不會自動消失，并顯示 loading 狀態，需要手動關閉對話框，常用于表單提交。  ```html <cvu-modal v-model="modal.show" :title="modal.title" :loading="true" > <div>對話框內容</div> </cvu-modal> ``` 基本用法 > 實例化使用方法 ```javascript this.$cvuModal.default({title: '對話框標題', content: '對話框內容'}) this.$cvuModal.info({title: '對話框標題', content: '對話框內容'}) this.$cvuModal.success({title: '對話框標題', content: '對話框內容'}) this.$cvuModal.warning({title: '對話框標題', content: '對話框內容'}) this.$cvuModal.error({title: '對話框標題', content: '對話框內容'}) this.$cvuModal.confirm({title: '對話框標題', content: '對話框內容', onOk: () => {}, onCancel: () => {}}) this.$cvuModal.remove() ``` ### props | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | value | 對話框是否顯示，可使用 v-model 雙向綁定數據。 | Boolean | false | | title | 對話框標題，如果使用 slot 自定義了頁頭，則 title 無效 | String | \- | | closable | 是否顯示右上角的關閉按鈕，關閉后 Esc 按鍵也將關閉 | Boolean | true | | mask-closable | 是否允許點擊遮罩層關閉 | Boolean | true | | loading | 點擊確定按鈕時，確定按鈕是否顯示 loading 狀態，開啟則需手動設置`value`來關閉對話框 | Boolean | false | | scrollable | 頁面是否可以滾動 | Boolean | false | | fullscreen | 是否全屏顯示 | Boolean | false | | draggable | 是否可以拖拽移動 | Boolean | false | | sticky | 拖拽時，是否吸附屏幕邊緣 | Boolean | false | | sticky-distance | 拖拽時，自動吸附屏幕邊緣的臨界距離 | Number | 10 | | reset-drag-position | Modal 再次打開時，是否重置拖拽的位置 | Boolean | false | | mask | 是否顯示遮罩層，~開啟 draggable 時，強制不顯示 | Boolean | true | | ok-text | 確定按鈕文字 | String | 確定 | | cancel-text | 取消按鈕文字 | String | 取消 | | <div style="color:#409EFF; text-decoration: underline; " title="新增屬性">ok-hide</div> | 隱藏確認按鈕 | Boolean | false | | <div style="color:#409EFF; text-decoration: underline; " title="新增屬性">cancel-hide</div> | 隱藏取消按鈕 | Boolean | false | | width | 對話框寬度，對話框的寬度是響應式的，當屏幕尺寸小于 768px 時，寬度會變為自動`auto`。當其值不大于 100 時以百分比顯示，大于 100 時為像素 | Number | String | 520 | | footer-hide | 不顯示底部 | Boolean | false | | <div style="color:#409EFF; text-decoration: underline; " title="新增屬性">at-center</div> | 對話框垂直居中顯示 | Boolean | false | | styles | 設置浮層樣式，調整浮層位置等，該屬性設置的是`.ivu-modal`的樣式 | Object | \- | | class-name | 設置對話框容器`.ivu-modal-wrap`的類名，可輔助實現垂直居中等自定義效果 | String | \- | | z-index | 層級 | Number | 1000 | | transition-names | 自定義顯示動畫，第一項是模態框，第二項是背景 | Array | \['ease', 'fade'\] | | transfer | 是否將彈層放置于 body 內 | Boolean | true | | lock-scroll | 是否禁止對頁面滾動條的修改 | Boolean | false | | before-close | 返回 Promise 可以阻止關閉 | Function | \- | ### events | 事件名 | 說明 | 返回值 | | --- | --- | --- | | on-ok | 點擊確定的回調 | 無 | | on-cancel | 點擊取消的回調 | 無 | | on-visible-change | 顯示狀態發生變化時觸發 | true / false | ### slots | 名稱 | 說明 | | --- | --- | | header | 自定義頁頭 | | footer | 自定義頁腳內容 | | close | 自定義右上角關閉內容 | | 無 | 對話框主體內容 | ### instance 通過直接調用以下方法來使用： * `this.$cvuModal.default(config)` * `this.$cvuModal.info(config)` * `this.$cvuModal.success(config)` * `this.$cvuModal.warning(config)` * `this.$cvuModal.error(config)` * `this.$cvuModal.confirm(config)` 以上方法隱式地創建及維護Vue組件。參數 config 為對象，具體說明如下： | 屬性 | 說明 | 類型 | 默認值 | | --- | --- | --- | --- | | title | 標題 | String | Element String | \- | | content | 內容 | String | Element String | \- | | render | 自定義內容，使用后不再限制類型， content 也無效。 | Function | \- | | width | 寬度，單位 px | Number \| String | 400 | | okText | 確定按鈕的文字 | String | 確定 | | cancelText | 取消按鈕的文字，只在`$cvuModal.confirm()`下有效 | String | 取消 | | loading | 點擊確定按鈕時，確定按鈕是否顯示 loading 狀態，開啟則需手動調用`$cvuModal.remove()`來關閉對話框 | Boolean | false | | scrollable | 頁面是否可以滾動 | Boolean | false | | closable | 是否可以按 Esc 鍵關閉 | Boolean | false | | onOk | 點擊確定的回調 | Function | \- | | onCancel | 點擊取消的回調，只在`$cvuModal.confirm()`下有效 | Function | \- | | lock-scroll | 是否禁止對頁面滾動條的修改 | Boolean | false | 另外提供了全局關閉對話框的方法： * `this.$cvuModal.remove()`