# Toast 提示

# 介绍

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

# 引入

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

# 示例

# 基础用法

<m-button bind:click="showToast">基础用法</m-button>

<m-toast id="toast" />

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

// 此处应为相对地址
import Toast from 'mind-ui-weapp/toast/toast'

Page({
	showToast() {
		Toast('simple toast')
	}
})

# 自定义位置

Toast 默认渲染在屏幕正中位置，通过 position 属性可以控制 Toast 展示的位置，当前支持 middle、top、bottom 三种值。

Toast({
	message: 'toast top',
	position: 'top'
})

# 自定义通知时长

自定义消息通知展示时长。

Toast({
	message: '5 秒后自动关闭',
	duration: 0,
	mask: true
})

# 加载状态

Toast({
	message: '加载中',
	type: 'loading'
})

# Properties

参数 说明 类型 可选值 默认值
custom-class 自定义样式类名 String — —
type 类型 String loadinng —
position 位置 String top center bottom center
duration 显示时间, 毫秒。设为 0 则不会自动关闭 Number — 2000
mask 是否显示遮罩层 Boolean — false
message 提示内容 String — —
image 图片地址 String — —
icon 图标名称 String — —
iconSize 图标大小（rpx） Number — 80
iconColor 图标颜色 String — #fff
zIndex 层级 Number — 2001

# Events

调用 Toast 会返回当前 Toast 的实例。如果需要手动关闭实例，可以调用它的 close 方法。

方法名称 说明
close 关闭当前 Toast

← Message 消息提示 →