# 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 展示的位置,当前支持 middletopbottom 三种值。

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