# 介绍

弹出模态框，常用于消息提示、消息确认，或在当前页面内完成特定的交互操作。

弹出框组件支持函数调用和组件调用两种方式。

# 引入

"usingComponents": {
  "m-modal": "mind-ui-weapp/modal/index"
}

# JS 调用

<m-modal id="modal" />

引入 modal 对象
注意：小程序中 import 文件无法使用相对路径，只可以使用绝对路径，以当前文件所在路径向上查找。
推荐使用以下方式挂载在 wx 全局上使用，页面中无需再次引入 js，详情请看 安装 目录介绍。

// 此处应为相对地址
import Modal from "mind-ui-weapp/modal/modal"

# 消息提示 Alert

Page({
	Modal.alert({
		title: "提示",
		content: "操作成功！"
	}).then(() => {
		// confirm
	})
})

# 消息确认 Confirm

Page({
	Modal.confirm({
		title: "提示",
		content: "确定要执行此操作吗？"
	}).then(() => {
		// confirm
	}).catch(() => {
		// cancel
	})
})

# 异步操作

设置 asyncClose 属性开启异步关闭，开启后手动需要 Modal.close() 方法关闭 modal

Page({
	Modal({
		title: "提示",
		content: "确定要执行此操作吗？",
		asyncClose: true
	}).then(() => {
		setTimeout(() => {
			Modal.close()
		}, 1200)
	}).catch(() => {
		Modal.close()
	})
})

# 组件调用

组件调用方式可自定义 modal 内容

<m-modal visible="{{ show }}" bind:close="handleClose" bind:confirm="handleConfirm">
	<image
		src="https://note-file.ixook.com/FkwInL0tWpqDeRNtYHMfmaHlioTq"
		style="width: 250rpx;height:250rpx;"
	/>
</m-modal>

Page({
	data: {
		show: true
	},

	handleConfirm() {

	},

	handleClose() {
		this.setData({
			show: false
		})
	}
})

# 方法

方法 参数 返回值 说明
Modal options promise —
Modal.alert options promise 消息提示
Modal.confirm options promise 消息确认
Modal.close - - 关闭弹窗

# Options

参数 说明 类型 默认值
title 标题 String —
content 文本内容 String —
showConfirmButton 是否显示确认按钮 Boolean true
showCancelButton 是否显示取消按钮 Boolean true
confirmButtonText 确认按钮文字 String —
cancelButtonText 取消按钮文字 String —
confirmTextColor 确认按钮文字颜色 String #409EFF
asyncClose 是否开启异步关闭弹窗，开启后需要手动控制弹窗的关闭 Boolean false

# Properties

参数 说明 类型 默认值
visible 是否显示弹窗 Boolean —
title 标题 String —
content 文本内容 String —
show-confirm-button 是否显示确认按钮 Boolean true
show-cancel-button 是否显示取消按钮 Boolean true
confirm-button-text 确认按钮文字 String —
cancel-button-text 取消按钮文字 String —
confirm-text-color 确认按钮文字颜色 String #409EFF
close-on-click-modal 是否可以通过点击遮罩层关闭modal Boolean boolean
async-close 是否开启异步关闭弹窗，开启后需要手动控制弹窗的关闭 Boolean false
loading js 异步调用时会内部处理，组件形式异步调用时需手动设置 Boolean false
custom-class 根节点样式类 String —
custom-mask-class 遮罩层样式类 String —
custom-body-class content 域样式类 String —

# Events

事件 说明 回调
bind:confirm 弹窗确认时触发 —
bind:cancel 弹窗取消时触发 —
bind:close 弹窗关闭时触发 —

# Slot

名称 说明
— 自定义显示内容，如果设置了 content 属性则不生效

← Drawer 抽屉 →