# 介绍

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

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

# 引入

"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 属性则不生效