Toast 轻提示

弹出式消息提示

引入

import { Toast } from 'mand-mobile-next'

Toast.succeed('操作成功')

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

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

代码演示

API

Toast Props

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

Toast Methods

show()

展示提示

hide()

隐藏提示

Toast Events

@show()

提示展示事件

@hide()

提示隐藏事件

示例

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

Toast Static Methods

Toast.create(ToastOptions)

显示自定义提示

ToastOptions

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

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

显示纯文本提示

属性	说明	类型	默认值
content	提示内容文本	String	-
duration	显示多少毫秒后自动消失, 若为`0`则一直显示	Number	`3000`
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	`false`

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

显示成功提示

属性	说明	类型	默认值
content	提示内容文本	String	-
duration	显示多少毫秒后自动消失, 若为`0`则一直显示	Number	`3000`
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	`false`

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

显示失败提示

属性	说明	类型	默认值
content	提示内容文本	String	-
duration	显示多少毫秒后自动消失, 若为`0`则一直显示	Number	`3000`
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	`false`

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

显示载入提示

属性	说明	类型	默认值
content	提示内容文本	String, Number	-
duration	显示多少毫秒后自动消失, 若为`0`则一直显示	Number	`0`
hasMask	是否显示透明遮罩, 以此防止用户点击	Boolean	`true`

Toast.hide()

隐藏提示

气泡提示

动画

# Toast 轻提示

# 引入

# 代码演示

# API

# Toast Props

# Toast Methods

# show()

# hide()

# Toast Events

# @show()

# @hide()

# 示例

# Toast Static Methods

# Toast.create(ToastOptions)

# ToastOptions

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

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

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

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

# Toast.hide()

Toast 轻提示

引入

代码演示

API

Toast Props

Toast Methods

show()

hide()

Toast Events

@show()

@hide()

示例

Toast Static Methods

Toast.create(ToastOptions)

ToastOptions

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

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

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

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

Toast.hide()