useModal

动态创建组件，打开弹窗/抽屉。

提示

只需传入组件名和组件的 props，即可动态创建组件实例，并调用 modal 的静态方法打开弹窗。解决 modal 传统使用方法需要控制 open 状态、给子组件传入参数、处理子组件事件代码分散不易维护的问题。(组件会复用的情况下才需要封装，只有自己用的时候直接使用传统方法更方便)

代码演示

基本用法

动态创建组件，打开弹窗/抽屉

<template>
  <a-space>
    <a-button type="primary" @click="showModal">打开弹窗</a-button>
    <a-button type="primary" @click="showDrawer">打开抽屉</a-button>
    <a-button type="primary" @click="showInput">打开输入框弹窗</a-button>
  </a-space>
</template>

<script setup lang="ts">
import AddUser from "./AddUser.vue";
import { useModal } from "@witlink/components";
const modal = useModal();

function showModal() {
  modal.modalComp({
    title: "新增用户",
    comp: AddUser,
    props: {
      onSubmit: () => {
        console.log("已提交");
      },
    },
    width: 600,
    footer: null,
  });
}
function showDrawer() {
  modal.drawerComp({
    title: "新增用户",
    comp: AddUser,
    props: {
      onSubmit: () => {
        console.log("已提交");
      },
    },
    width: 600,
    footer: null,
  });
}
function showInput() {
  modal.modalInput({
    title: "备注",
    width: 480,
    onOk: (text) => {
      console.log(text);
      return true;
    },
  });
}
</script>