Modal 弹窗
对 antv 的 modal 组件进行封装,扩展拖拽,全屏,自适应高度等功能
Usage
由于弹窗内部代码一般独立成单独文件,也推荐独立成组件来进行开发,所以示例都是以独立的文件来进行说明
独立组件代码,用于写组件内部的内容
TIP
注意 v-bind="$attrs"
记得写
// 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: 传递到子组件的数据
openDrawer(true, data);
closeDrawer
用于关闭弹窗
closeDrawer();
setModalProps
用于更改 modal 的 props 参数因为 modal 内容独立成组件,如果在外部页面需要更改 props 可能比较麻烦,所以提供setModalProps 方便更改内部 modal 的 props
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 内容可以见下方
Props
TIP
除以下参数外,组件库文档内的 props 也都支持,具体可以参考 antv modal
属性 | 类型 | 默认值 | 可选值 | 说明 |
---|---|---|---|---|
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 | 默认区域 |