Vben Admin

Modal 弹窗

对 antv 的 modal 组件进行封装，扩展拖拽，全屏，自适应高度等功能

代码路径 src/components/Modal

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 内容可以见下方

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

属性类型默认值可选值说明
titlestring--modal 标题
heightnumber--固定 modal 的高度
minHeightnumber--设置 modal 的最小高度
draggablebooleantruetrue/false是否开启拖拽
useWrapperbooleantruetrue/false是否开启自适应高度，开启后会跟随屏幕变化自适应内容，并出现滚动条
wrapperFooterOffsetnumber0-开启是适应高度后，如果超过屏幕高度，底部和顶部会保持一样的间距，该参数可以用来缩小底部的间距
canFullscreenbooleantruetrue/false是否可以进行全屏
defaultFullscreenbooleanfalsetrue/false默认全屏
loadingbooleanfalsetrue/falseloading 状态
loadingTipstring--loading 文本
showCancelBtnbooleantruetrue/false显示关闭按钮
showOkBtnbooleantruetrue/false显示确认按钮
helpMessagestring , string[]--标题右侧提示文本
centeredbooleanfalsetrue/false是否居中弹窗
cancelTextstring'关闭'-关闭按钮文本
okTextstring'保存'-确认按钮文本
closeFunc() => Promise<boolean>关闭函数-关闭前执行，返回 true 则关闭，否则不关闭

Events

事件回调参数说明
okfunction(e)点击确定回调
cancelfunction(e)点击取消回调
visible-change(visible:boolean)=>{}打开或者关闭触发

Slots

名称说明
default默认区域
footer底部区域(会替换掉默认的按钮)
insertFooter关闭按钮的左边(不使用 footer 插槽时有效)
centerFooter关闭按钮和确认按钮的中间(不使用 footer 插槽时有效)
appendFooter确认按钮的右边(不使用 footer 插槽时有效)