Modal

函数式弹框组件

• 用完即走-函数式编程打开和关闭弹框，无需维护其显隐状态，代码结构逻辑更清晰
• 内容容器-适用于非路由跳转的表单页 详情页,重新打开无需重置表单，一个组件专注于一个功能
• 流畅动画-弹框显隐有来回的轨迹

组件示例 1-直接传入字符串

基础用法传入文字，作为提示框适用

<template>
  <Button type="primary" @click="handleOpen">打开Modal</Button>
</template>

<script setup lang="ts">
import { Button, Modal } from "leisure-lib";
const handleOpen = () => {
  Modal.open("您已经打开了Modal", {
    title: "我是Modal",
    onOk: (contentInstance) => {
      console.log("🚀 ~ handleOpen ~ contentInstance:", contentInstance);
    },
  });
};
</script>

<style scoped></style>

组件示例 2-传入 vue 组件

可以直接传入vue组件

<template>
  <Button type="primary" @click="handleOpen">打开Modal</Button>
</template>

<script setup lang="ts">
import { Button, Modal } from "leisure-lib";
import content from "./content2.vue";

const handleOpen = () => {
  Modal.open(content, { title: "新建数据" });
};
</script>

<style scoped></style>

组件示例 3-传入 vue 组件内再次打开弹框

组件内部也可以调用Modal.open()方法打开新的弹框，无需维护其显隐状态，各个组件之前的属性相互隔离

<template>
  <Button type="primary" @click="handleOpen">打开Modal</Button>
</template>

<script setup lang="ts">
import { Button, Modal } from "leisure-lib";
import content from "./content3.vue";

const handleOpen = () => {
  Modal.open(content, { title: "新建数据" });
};
</script>

<style scoped></style>

组件示例 4-不使用自带 footer

当设置footer=false，可以添加.footer-wrap类来自定义footer

<template>
  <Button type="primary" @click="handleOpen">打开Modal</Button>
</template>

<script setup lang="ts">
import { Button, Modal } from "leisure-lib";
import content from "./content4.vue";

const handleOpen = () => {
  Modal.open(content, { title: "新建数据", width: 550, footer: false }).then(
    (res) => {
      console.log(res);
    }
  );
};
</script>

<style scoped></style>

模型 type/inteface

interface ModalI {
  vNode: VNode;
  parent: HTMLElement;
  title: string;
  duration: number;
  close: () => void;
  open: (comp: number, config: {}, ev: Event) => void;
}

方法

方法名	参数	返回值	说明
open	comp config	Promise	新建一个新弹框实例
close	无	无	销毁当前弹框实例

参数名	数据类型	默认值	说明
comp	string VNode	" "	Modal 的内容
config	object	{}	Modal 的配置

config 属性

参数名	数据类型	默认值	说明
title	string	""	头部 title
width	string number	"auto"	宽度-可传200px 200 50%等
footer	boolean	true	底部可操作栏，默认居中显示
onOk	function	(contentRef)=>{}	点击 footer 的确认按钮的回调函数,参数会返回传入内容的 Ref
onClose	function	()=>{}	点击 footer 的取消按钮的回调函数，默认会销毁当前 Modal 实例

插槽