BasicModal 弹窗

对 antv 的 modal 组件进行封装，扩展拖拽，全屏，自适应高度等功能 代码路径 src/components/Modal

基本用法

由于弹窗内代码一般作为单文件组件存在，也推荐这样做，所以示例都为单文件组件形式 注意v-bind="$attrs"记得写，用于将弹窗组件的attribute传入BasicModal组件 ModalComponent1.vue

<template>
  <BasicModal v-bind="$attrs" title="我是模态框标题" :helpMessage="['提示1', '提示2']">
    内容区
  </BasicModal>
</template>
<script setup>
  import { BasicModal } from '/@/components/Modal';
</script>

页面引用弹窗 xxPage.vue

<template>
  <PageWrapper>
    <a-button @click="handleClick">打开</a-button>
    <ModalDemo @register="register" />
  </PageWrapper>
</template>
<script setup>
  import ModalDemo from './ModalDemo.vue';
  import { useModal } from '/@/components/Modal';
  const [register, { openModal }] = useModal();
  const handleClick = () => {
    openModal();
  };
</script>

参数传递

外部引用页面可以通过openModal进行参数传递 xxPage.vue

<template>
  <PageWrapper>
    <a-button @click="handleClick">打开</a-button>
    <ModalDemo @register="register" />
  </PageWrapper>
</template>
<script setup>
  import ModalDemo from './ModalDemo.vue';
  import { useModal } from '/@/components/Modal';
  const [register, { openModal }] = useModal();
  const handleClick = () => {
    // 传参
    openModal(true, {
      id: '1',
    });
  };
</script>

弹窗文件可以通过回调函数进行接收 ModalComponent2.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="我是模态框标题"
    :helpMessage="['提示1', '提示2']"
  >
    内容区
  </BasicModal>
</template>
<script setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  const [register] = useModalInner((data) => {
    // 接收参数
    console.log(data);
  });
</script>