Modal 对话框

在保留当前页面状态的情况下，弹出一个对话框告知用户并承载相关操作，包含：标题区、内容区、操作区

引用

import { Modal, regist, Button, CloseIcon } from "litos-ui";

regist([Modal]);
// 当显示底部时调用
regist(Button);
// 当需要显示关闭按钮时
regist(CloseIcon);

演示

基础用法

需要设置 open 属性，它接收 Boolean，当为 true 时显示 Modal。title 属性用于定义标题，它是可选的，默认值为空。

自定义头部

除了使用 title 属性定义头部内容外，也可以通过传递 header-slot 插槽自定义头部内容。通过传递 width 属性改变宽度

注意：实际使用 l-info-icon 时, 需要 regist 注册

异步关闭

点击确定后异步关闭对话框，例如提交表单。

关闭按钮

通过设置 close 来控制关闭按钮的显示以及位置；0 - 不显示, 1 - 显示在框内(默认), 2 - 显示在边角

移动风格

默认情况下对话框为 pc 端风格，可以通过传递 mobile 属性将对话框变为移动风格；设置 vertical-align="middle" 让对话框垂直居中显示;具体表现为：文本居中，下方按钮平铺

消息弹窗

模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、确认消息和提交内容。系统自带有3种消息弹窗：alert、confirm、prompt 但是其样式比较简陋不太美观，消息弹窗优化了样式。

分别通过 LModalBox.alert()、LModalBox.confirm()、LModalBox.prompt() 调用

API

Modal Attibutes

参数	说明	类型	默认值
open	是否显示对话框	boolean	false
destroy-on-close	关闭时销毁 Modal 里的子元素	boolean	false
mask-closable	点击蒙层是否允许关闭	boolean	true
mask	是否显示遮罩层	boolean	true
title	标题	string	""
footer	是否展示底部	boolean	true
cancel-text	取消按钮文字	string	取消
ok-text	确定按钮文字	string	确定
close	关闭按钮显示位置, 0 - 不显示, 1 - 显示在框内(默认), 2 - 显示在边角	0 | 1 | 2	1
mobile	是否为移动风格	boolean	false
vertical-align	对话框垂直对齐方式, top - 顶部, middle - 居中	top | middle | bottom	top
confirm-loading	确定按钮 loading	boolean	false
cancel	是否显示取消按钮	boolean	true
width	对话框宽度	string	27%
z-index	对话框层级	string	100

Modal Parts

名称	说明
mask	遮罩层
wrapper	对话框外层
default	对话框主体
header	对话框头部
container	对话框内容
footer	对话框底部

Modal Slots

名称	说明
default	对话框内容
header	对话框标题
footer	对话框底部

Modal Events

事件名	说明	回调参数
cancel	点击遮罩层或右上角叉或取消按钮的回调	(event: CustomEvent)
ok	点击确定回调	(event: CustomEvent)

Modal CSS Variables

变量名	说明	默认值
--l-modal-zindex	对话框的层级 z-index	100
--l-modal-width	对话框宽度	27%

ModalBox Methods

方法名	说明	参数	返回值
alert	展示消息提示框	message: string, title?: string, options?: LModalBoxOptions	Promise
confirm	展示消息确认框	message: string, title?: string, options?: LModalBoxOptions	Promise<boolean>
prompt	展示输入框	message: string, title?: string, options?: LModalBoxOptions	Promise<string>

ModalBoxOptions

参数	说明	类型	默认值
showCancel	是否显示取消按钮	boolean	true(alert默认false)
close	关闭按钮显示位置, 0 - 不显示, 1 - 显示在框内(默认), 2 - 显示在边角	0 | 1 | 2	0
maskClosable	点击蒙层是否允许关闭	boolean	true(alert默认false)
icon	自定义图标	() => HTMLElement	-
placeholder	输入框占位符, prompt 时有效	string	-