mand-mobile/components/toast/README.md

title	preview
Toast 轻提示	https://didi.github.io/mand-mobile/examples/#/toast

弹出式消息提示

引入

import { Toast } from 'mand-mobile'

Toast.succeed('操作成功')

this.$toast.info('提示') // 全量引入

Vue.component(Toast.component.name, Toast.component) // 组件引入

代码演示

API

Toast Static Methods

Toast({content, icon, iconSvg, duration, position, hasMask, parentNode, square})

显示自定义提示

属性	说明	类型	默认值	备注
icon	Icon组件图标名称	String	-	如需自定义图标, 请查看Icon组件
iconSvg	使用svg图标	Boolean	false	-
content	提示内容文本	String	-	-
duration	显示多少毫秒后自动消失, 若为0则一直显示	Number	3000	-
position	展示位置	String	center	top/center/bottom
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	false	-
parentNode	组件挂载节点	HTMLElement	document.body	-
square 2.6.0+	使用方形样式	Boolean	false	-

Toast.info(content, duration, hasMask, parentNode, square)

显示纯文本提示

属性	说明	类型	默认值	备注
content	提示内容文本	String	-	-
duration	显示多少毫秒后自动消失, 若为0则一直显示	Number	3000	-
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	false	-
parentNode	组件挂载节点	HTMLElement	document.body	-
square 2.6.0+	使用方形样式	Boolean	false	-

Toast.succeed(content, duration, hasMask, parentNode, square)

显示成功提示

属性	说明	类型	默认值	备注
content	提示内容文本	String	-	-
duration	显示多少毫秒后自动消失, 若为0则一直显示	Number	3000	-
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	false	-
parentNode	组件挂载节点	HTMLElement	document.body	-
square 2.6.0+	使用方形样式	Boolean	false	-

Toast.failed(content, duration, hasMask, parentNode, square)

显示失败提示

属性	说明	类型	默认值	备注
content	提示内容文本	String	-	-
duration	显示多少毫秒后自动消失, 若为0则一直显示	Number	3000	-
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	false	-
parentNode	组件挂载节点	HTMLElement	document.body	-
square 2.6.0+	使用方形样式	Boolean	false	-

Toast.loading(content, duration, hasMask, parentNode, square)

显示载入提示

属性	说明	类型	默认值	备注
content	提示内容文本	String, Number	-	-
duration	显示多少毫秒后自动消失, 若为0则一直显示	Number	0	-
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	true	-
parentNode	组件挂载节点	HTMLElement	document.body	-
square 2.6.0+	使用方形样式	Boolean	false	-

Toast.hide()

隐藏提示

Toast Props

^2.3.0+

属性	说明	类型	默认值	备注
icon	Icon组件图标名称	String	-	如需自定义图标, 请查看Icon组件
iconSvg	使用svg图标	Boolean	false	-
content	提示内容文本	String	-	-
duration	显示多少毫秒后自动消失, 若为0则一直显示	Number	3000	-
position	展示位置	String	center	top/center/bottom
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	false	-
square 2.6.0+	使用方形样式	Boolean	false	-

Toast Slots

default

<md-toast>
  <md-activity-indicator>loading...</md-activity-indicator>
</md-toast>

Toast Methods

^2.3.0+

show()

展示提示

hide()

隐藏提示

Toast Events

^2.3.0+

@show()

提示展示事件

@hide()

提示隐藏事件