useModal(推荐使用)

使用案例

TIP

若使用自动按需导入则直接使用useEyModal,无需导入

<template>
  <a-space>
    <a-button type="primary" @click="open('A')">内容A</a-button>
    <a-button type="primary" @click="open('B')">内容B</a-button>
  </a-space>
  <a-modal
    :confirm-loading="loading"
    title="查看订单"
    :visible="visible"
    width="750px"
    @cancel="close"
    @ok="confirm"
  >
    {{ modalContent }}
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { message } from 'ant-design-vue';
import { useModal } from 'ey-admin';
const modalContent = ref('');
// 将各种状态即打开关闭集成于一个hook
const { visible, loading, open, close, confirm } = useModal(
  () => {
    return new Promise<string>(resolve => {
      setTimeout(() => {
        resolve('success');
        message.success('请求成功');
        close();
      }, 1000);
    });
  },
  {
    beforeOpen(type: string) {
      modalContent.value = `这里是内容${type}`;
    },
  },
);
</script>

隐藏代码

import { useModal } from 'ey-admin';
const { visible, loading, open, close, confirm } = useModal(
  async () => {
   // 这里是confirm执行时的处理逻辑
  },
  {
    beforeOpen(){},
    afterOpen(){},
    beforeClose(){},
    afterClose(){}
  },
);

API

Attributes

成员	说明	类型	是否必传	默认值
handle	confirm 运行时所执行的函数	(...args: any[]) => void | Promise<T>	否	null
hooks	对应执行过程的钩子方法	Hooks	否	{}

Hooks

hooks类型
beforeOpen?: (...args: any[]) => void;
afterOpen?: (...args: any[]) => void;
beforeClose?: (...args: any[]) => void;
afterClose?: (...args: any[]) => void;