Modal 模态框

展示标题、描述、插槽内容和操作按钮。

支持平台

以下为官网文档所列的平台支持情况，具体功能及版本限制请参见本页的平台说明。

App-vue	App-nvue	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序	H5	PC	快手小程序	钉钉小程序
✓	✓	✓	✓	✓	✓	✓	✓	✓	✓	✓

基础用法

<!-- 模态框 -->
<fui-modal :show="showModal" title="提示" descr="确认提交吗？"
  @click="handleModalClick" @cancel="showModal = false" />

按钮点击后需由页面根据返回的索引处理，并更新 showModal。

属性

除遮罩颜色和层级外，尺寸单位为 rpx。

属性	类型	说明	官网默认值
show	Boolean	是否显示	false
title	String	标题	-
size	Number / String	标题字号	34
color	String	标题颜色	#333
descr	String	描述内容	-
descrSize	Number / String	描述字号	28
descrColor	String	描述颜色	#7F7F7F
buttons	Array	按钮对象数组	取消、确定
direction	String	按钮排列方向：row、column	row
radius	Number / String	按钮圆角	16
width	Number / String	模态框宽度	640
top	Number / String	垂直偏移，可为负数	0
background	String	背景色	#FFFFFF
boxRadius	Number / String	容器圆角	16
padding	Number / String	容器上下内边距	32
maskBackground	String	遮罩颜色	rgba(0,0,0,.6)
maskClosable	Boolean	点击遮罩是否触发 cancel	false
zIndex	Number	层级，nvue 不支持	996

默认按钮为 [{ text: '取消', plain: true }, { text: '确定' }]；按钮对象还可设置 color 和 background。

事件

事件	说明	回调参数
click	点击模态框按钮	包含 index 和按钮字段的对象
cancel	点击可关闭的遮罩	{}

插槽

插槽	说明
default	模态框的自定义内容