Toast 轻提示

屏幕居中的轻提示组件，带缩放淡入淡出动画，支持状态类型、自定义图标与自动关闭；可通过 `open` / `close` 方法命令式控制。

小程序	APP	Web
✓	✓	✓

实例

以下按属性分别说明 mu-toast 的用法，可按需组合。

<template>
  <mu-toast ref="toastRef" @close="onToastClose"></mu-toast>
</template>

状态提示

调用实例的 open 方法传入 type，可选 success、info、warning、error，不同类型对应不同的图标与图标颜色，例如 open({ type: 'success', content: '操作成功' })、open({ type: 'error', content: '操作失败，请重试' })。

自定义时长

通过 duration 设置停留毫秒数，例如 open({ content: '仅显示 500 毫秒', duration: 500 })；设为 3000 停留 3 秒，设为 0 时不自动关闭，如 open({ content: '不自动关闭', duration: 0 })。

自定义图标

传入 icon 覆盖类型图标，取值为图标列表中的名称，例如 open({ icon: 'star1', content: '自定义图标提示' })。

常驻与手动关闭

duration 为 0 时提示常驻，通过实例的 close() 手动关闭。

<mu-toast ref="toastRef" @close="onToastClose"></mu-toast>

属性

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

属性名称	说明	类型	默认值
show	是否显示	boolean	false
type	提示类型，决定图标与图标颜色，可选 success、warning、error、danger、info	string	-
content	提示文字内容	string	-
icon	自定义图标名称，设置后覆盖类型图标	string	-
duration	自动关闭延时（ms），为 0 时不自动关闭	number	2000
zIndex	层级	number	1000
customClass	自定义根节点类名	string	-
customStyle	自定义根节点样式	string	-

事件

组件支持以下事件。

事件名	说明	回调参数
close	提示关闭时触发	-

方法

通过 ref 获取组件实例后调用以下方法。

方法名	说明	参数	返回值
open	显示提示，可传入配置覆盖当前状态	options: ToastOptions	-
close	关闭提示	-	-

配置项

open(options) 的参数结构：

字段	说明	类型
type	提示类型	string
content	提示文字内容	string
icon	自定义图标名称	string
duration	自动关闭延时（ms）	number

注意事项

• 平台差异：App、小程序、Web 表现一致。
• 使用注意：通过 ref 调用 open(options) 显示、close() 关闭，open 传入的字段会覆盖当前配置。
• 使用注意：duration 为 0 时常驻不自动关闭，自动与手动关闭都会触发 close。
• 使用注意：type 决定图标与颜色，设置 icon 后会覆盖类型图标；组件不提供内容插槽，文字需通过 content 传入。