## 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()`