Toast 轻提示

基本用法

需要在页面中引入该组件，作为挂载点。

<wd-toast id="wd-toast"/>
<wd-button bind:click="showToast">toast</wd-button>

import Toast from '/wot-design/toast/toast.js'

Page({
  showToast () {
    Toast('提示信息')
  }
})

Toast.success('操作成功')
Toast.error('手机验证码输入错误，请重新输入')
Toast.warning('提示信息')
Toast.info('常规提示信息')

// 顶部提示
Toast({
  position: 'top',
  msg: '提示信息'
})

// 底部提示
Toast({
  position: 'bottom',
  msg: '提示信息'
})

Toast.close()

loading 开启后需要用户手动关闭，关闭可以调用 close，或者再调用一次 toast 提示，因为 toast 只会存在一个，新的 toast 会自动顶掉旧的 toast。

Toast.loading('加载中...')

修改 loading 指示器类型：

Toast.loading({
  loadingType: 'ring',
  msg: '加载中...'
})

手动关闭 loading：

Toast.close()

参数	说明	类型	可选值	默认值	最低版本
options	配置项，可以直接传入字符串作为提示信息	string / object	-	-	-

参数	说明	类型	可选值	默认值	最低版本
msg	消息内容	string	-	-	-
duration	持续时间，单位 ms，为0时表示不自动关闭	number	-	2000	-
iconName	图标类型	string	success / error / warning	-	-
iconSize	左侧图标尺寸	string	-	42px	-
iconClass	图标类目，自定义图标，可以使用 Icon 章节的那些图标类名，iconName 优先级更高	string	-	-	-
customIcon	自定义图标，开启后可以通过 custom-icon-class 类名自定义图标	Boolean	-	false	-
position	提示信息框的位置	string	top / middle / bottom	middle	-
zIndex	toast 层级	number	-	100	-
loadingType	加载中图标类型	string	ring	outline	-
loadingColor	加载中图标颜色	string	-	#4D80F0	-
context	引用 `wd-toast` 的页面实例或自定义组件实例	object	-	当前页面实例	2.3.0

类名	说明	最低版本
custom-class	根结点样式	-
custom-icon-class	自定义图标类名	-