@lateinos/awesome-ui

# Modal 弹窗

# 引入

import { H3Modal } from '@lateinos/awesome-ui';

export default {
  components: {
    H3Modal,
  },
};

# 与Antd的区别

  • 主题颜色的区别，能明显感觉到背景遮罩颜色比Antd官方淡，弹窗阴影比Antd的要重；

  • 对Modal.confirm进行了二次封装，实现二次确认弹窗，只需传入属性doubleCheck即可实现;

Antd 官方文档：对话框 Modal (opens new window)

# 可配置主题

// 弹窗遮罩背景色
@h3-modal-mask-bg: rgba(50,58,74,0.1);
// 弹窗达到最大高度时，屏幕上下间距（组件自定义弹窗）
@h3-modal-max-height-space: 50px;
// 弹窗以函数式调用时的最大高度
@h3-modal-confirm-max-height: 150px;

# 函数式调用弹窗

# 二次确认弹窗

这个弹窗是我们奥哲自己封装的，用于需要强确认的弹窗，提供二次确认检查；

多数用于删除关键数据时的确认，因为我们这种场景很多，为防止研发中多次重复实现此弹窗，故在组件库内实现封装；

在confirm方法中新增了两个配置，doubleCheck和checkContent

# 自定义弹窗

# 自定义弹窗页脚

# 无title、无footer弹窗

# 宽度及高度限制

# 宽度

根据奥哲的业务场景，通过size参数可以使用预设的三种宽度的弹窗：

  • sm, small 小 480px;
  • md, medium 中 640px;
  • lg, large 大 800px;

size的默认值是sm, 即默认弹窗宽度是480px;

也可以直接设置width参数来定义宽度， 但是从统一规范的角度来说，这么做不推荐。

# 高度

当以函数式调用弹窗时会指定最大高度，防止弹窗过长，产生意外效果；组件式调用情况下不做高度限制，需要业务组内自行限制高度；

函数式调用时，弹窗会给定最大高度；内容区域最大高度 150px ;

特别适合用于处理异常提示，显示异常堆栈信息或是长文本提示；

# 居中显示

设置参数centered可启用弹窗的居中显示； 注意在居中显示时的上下边距；

# Api

# 作为组件

参数 说明 类型 默认值
afterClose Modal 完全关闭后的回调 function 无
bodyStyle Modal body 样式 object {}
cancelText 取消按钮文字 string| slot 取消
centered 垂直居中展示 Modal Boolean false
closable 是否显示右上角的关闭按钮 boolean true
confirmLoading 确定按钮 loading boolean 无
destroyOnClose 关闭时销毁 Modal 里的子元素 boolean false
footer 底部内容，当不需要默认底部按钮时，可以设为 :footer="null" string|slot 确定取消按钮
getContainer 指定 Modal 挂载的 HTML 节点 (instance): HTMLElement () => document.body
keyboard 是否支持键盘esc关闭 boolean true
mask 是否展示遮罩 Boolean true
maskClosable 点击蒙层是否允许关闭 boolean true
maskStyle 遮罩样式 object {}
okText 确认按钮文字 string|slot 确定
okType 确认按钮类型 string primary
okButtonProps ok 按钮 props, on: {}} -
cancelButtonProps cancel 按钮 props, , on: {}} -
size 弹窗大小 'sm'|'md'|'lg' 'sm'
title 标题 string|slot 无
visible(v-model) 对话框是否可见 boolean 无
width 宽度 string|number 520
wrapClassName 对话框外层容器的类名 string -
zIndex 设置 Modal 的 z-index Number 1000

# 事件

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

WARNING

<H3Modal /> 默认关闭后状态不会自动清空, 如果希望每次打开都是新内容，请设置 destroyOnClose。

# H3Modal.method() 函数式调用

包括：

  • H3Modal.info
  • H3Modal.success
  • H3Modal.error
  • H3Modal.warning
  • H3Modal.confirm

以上均为一个函数，参数为 object，具体属性如下：

参数 说明 类型 默认值
autoFocusButton 指定自动获得焦点的按钮 null|string: ok cancel ok
cancelText 取消按钮文字 string 取消
centered 垂直居中展示 Modal Boolean false
closable 是否显示右上角的关闭按钮 boolean false
class 容器类名 string -
content 内容 string |vNode |function(h) 无
iconType 图标 Icon 类型 string question-circle
maskClosable 点击蒙层是否允许关闭 Boolean false
keyboard 是否支持键盘esc关闭 boolean true
okText 确认按钮文字 string 确定
okType 确认按钮类型 string primary
okButtonProps ok 按钮 props ButtonProps -
doubleCheck 是否启用二次确认（只用于confirm） boolean false
checkContent 确认内容（只用于confirm） string -
cancelButtonProps cancel 按钮 props ButtonProps -
title 标题 string|vNode |function(h) 无
width 宽度 string|number 416
zIndex 设置 Modal 的 z-index Number 1000
onCancel 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 function 无
onOk 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 function 无

以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

import { H3Modal } from '@lateinos/awesome-ui';
const modal = H3Modal.info();

modal.update({
  title: '修改的标题',
  content: '修改的内容',
});

modal.destroy();

← Loading 加载 →