Modal 模态窗

在保留当前页面状态的情况下，告知用户并承载相关操作。

基础用法

弹出一个对话框，适合定制性更强的场景

需要设置 model-value(v-model) 属性，它接收 Boolean，当为 true 时显示 Modal。

推荐

modal 模态窗组件推荐使用 function 方式，有益于逻辑抽离和后续维护。

使用 function 方式需要全局注册使用 modalInstall 方法

import { modalInstall } from 'apathia-ui'
app.use(modalInstall)

vue

<template> <div style="display: flex; gap: 20px"> <ap-modal v-model="show" title="template基础用法"> 我们的孤独就像天空中漂浮的城市，仿佛是一个秘密，却无从述说。 </ap-modal> <ap-button @click="showModal">点击弹出(template)</ap-button> <ap-button @click="showModalFn">点击弹出(function)</ap-button> </div> </template> <script lang="ts" setup> import { modal } from 'apathia-ui' import { ref, h } from 'vue' const show = ref(false) const showModal = () => { show.value = true } const showModalFn = () => { modal({ title: '函数式调用', render: () => h( 'div', '一个人的时候，怎么过？就算再难以承受，其实到最后我们总能走得过来。', ), }) } </script>

显示代码

自定义宽度

可以通过 width 自定义宽度

vue

<template> <div> <ap-modal v-model="show" title="基础用法" width="400px"> 在两个人的世界里，管他的风雨雷电飞沙走石天崩地裂，只要能在一起就足够了。 </ap-modal> <ap-button @click="showModal">自定义宽度(template)</ap-button> <ap-button @click="showModalFn">自定义宽度(function)</ap-button> </div> </template> <script lang="ts" setup> import { ref, h } from 'vue' import { modal } from 'apathia-ui' const showModalFn = () => { modal({ title: '函数式调用', width: '400', render: () => h( 'div', '一个人的时候，怎么过？就算再难以承受，其实到最后我们总能走得过来。', ), }) } const show = ref(false) const showModal = () => { show.value = true } </script>

显示代码

关闭方式

点击蒙层关闭 设置 maskClosable 或 esc 关闭弹窗(默认)

vue

<template> <div> <ap-modal v-model="show" title="基础用法" mask-closable> 当陪你的人要下车时，即使不舍，也该心存感激，然后挥手道别。 </ap-modal> <ap-button @click="showModal">点击蒙层关闭</ap-button> </div> </template> <script lang="ts" setup> import { ref } from 'vue' const show = ref(false) const showModal = () => { show.value = true } </script>

显示代码

自定义 header

可以完全自定义 header 的头部

template 方式通过 header 插槽实现，同时返回关闭 modal 的函数 close

function 方式通过 renderHeader 方法实现, 返回值为 h 函数 、字符 、JSX 等

vue

<template> <div> <ap-modal v-model="show" title="template基础用法"> <template #header="{ close }"> <div :class="contentClass"> <span>自定义header</span> <ap-button danger @click="close">关闭</ap-button> </div> </template> <template #default> <div>我们的孤独就像天空中漂浮的城市，仿佛是一个秘密，却无从述说。</div> </template> </ap-modal> <ap-button @click="showModal">自定义 header(template) </ap-button> <ap-button @click="showModalFn">自定义header(function)</ap-button> </div> </template> <script lang="ts" setup> import { ref, h } from 'vue' import { style, modal, ApButton } from 'apathia-ui' const contentClass = style`flex w-full justify-between` const show = ref(false) const showModal = () => { show.value = true } const showModalFn = () => { modal({ render: () => h( 'div', '一个人的时候，怎么过？就算再难以承受，其实到最后我们总能走得过来。', ), renderHeader: props => h( 'div', h( 'div', { style: { display: 'flex', justifyContent: 'space-between', width: '100%', padding: '1rem', }, }, [ h('span', '自定义header'), h(ApButton, { danger: true, onClick: props!.close }, '关闭'), ], ), ), }) } </script>

显示代码

嵌套使用

可以在一个对话框中再次打开一个对话框

vue

<template> <ap-button @click="showModalFn1">嵌套使用</ap-button> </template> <script lang="tsx" setup> import { modal, ApButton } from 'apathia-ui' import { h } from 'vue' const showModalFn = () => { modal({ title: '函数式调用 - 内层', render: () => h( 'div', '一个人的时候，怎么过？就算再难以承受，其实到最后我们总能走得过来。', ), }) } const showModalFn1 = () => { modal({ title: '函数式调用 - 外层', width: 700, render: () => h(ApButton, { onClick: showModalFn }, '点击打开二级modal'), }) } </script>

显示代码

Modal props

prop	说明	类型	默认值
modelValue	是否展示, template 方式使用	boolean	false
title	标题	string	''
subTitle	副标题	string	''
top	距离页面顶部距离	number,string	60(px)
width	模态窗宽度	number,string	640(px)
showClose	是否展示右上角关闭按钮	boolean	true
maskClosable	是否可以点击蒙层关闭	boolean	false
keyboard	是否可以通过 Esc 按键关闭	boolean	true
beforeClose	关闭前校验	function: () => bool.bool 为 true 则关闭，否则阻止关闭 、 () => true
render	function 方式的内容 render 函数	function: () => string 、 h 、 JSX	-
renderHeader	function 方式的 header 的 render 函数	function: () => string 、 h 、JSX	-

Modal 插槽 （template 使用）

名称	说明	接收参数
-	default(默认插槽)，自定义内容插槽	-
header	自定义头部	close: 关闭 modal

events

close: 关闭时触发。无参数