Model | 弹窗

Ryan SU大约 3 分钟

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

Usage

由于弹窗内代码一般作为单文件组件存在，也推荐这样做，所以示例都为单文件组件形式

提示

注意 v-bind="$attrs"记得写，用于将弹窗组件的 attribute 传入 BasicModal 组件

<template>
  <BasicModal
    v-bind="$attrs"
    :visible="true"
    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

原理其实很简单，就是 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

提示

除以下参数外，组件库文档内的 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	默认区域
footer	底部区域(会替换掉默认的按钮)
insertFooter	关闭按钮的左边(不使用 footer 插槽时有效)
centerFooter	关闭按钮和确认按钮的中间(不使用 footer 插槽时有效)
appendFooter	确认按钮的右边(不使用 footer 插槽时有效)