Toast 轻提示

用于操作反馈、加载等待与异常告知的微型弹窗轻提示控件。支持全局零 import 命令式调用 uni.$toast() 或 uni.$mu.toast()，亦可自动拦截 uni.showToast()。

---

代码示例

1. 基础文字提示 (Basic Text)

使用 uni.$toast() 或 uni.$mu.toast() 快捷发布单条纯文字轻提示。

<template>
  <mu-button type="primary" block @click="showToast">触发文字提示</mu-button>
</template>

<script setup>
const showToast = () => {
  uni.$toast('网络连接稳定，运行正常')
}
</script>

---

2. 状态图标 (Icon Types)

传入对象 { title, type } 展示不同语义状态的图标 (success | error | warning | loading)。

<script setup>
// 成功提示
uni.$toast({ title: '修改提交成功！', type: 'success' })

// 失败提示
uni.$toast({ title: '网络连接超时，请重试', type: 'error' })

// 警告提示
uni.$toast({ title: '请注意账户资金安全', type: 'warning' })

// 加载中提示
uni.$toast({ title: '数据加载中...', type: 'loading', duration: 2500 })
</script>

---

3. 位置控制 (Position)

设置 position ('top' | 'center' | 'bottom') 控制 Toast 弹出的屏幕位置。

<script setup>
// 顶部弹出
uni.$toast({ title: '顶部提示消息', position: 'top' })

// 底部弹出
uni.$toast({ title: '底部提示消息', position: 'bottom' })
</script>

---

API 方法说明 (Methods)

推荐使用框架封装的 uni.$toast 命令式 API：

方法	说明	参数
uni.$toast(title, type, options)	快捷发布轻提示	(title: String | Object, type?: String, options?: Object)
uni.$toast.hide()	手动立刻收起/隐藏当前 Toast	-

---

API 属性说明 (Options)

uni.$toast({ ... }) 接收如下配置选项：

参数名	说明	类型	可选值	默认值
title	提示的主要文案内容	String	-	''
type	图标语义类型	String	default | success | error | warning | loading	'default'
position	屏幕弹出展示位置	String	top | center | bottom	'center'
duration	持续展示时长 (毫秒，0 表示不自动收起)	Number	-	2000
onClose	Toast 自动收起或手动关闭时的回调函数	Function	-	null

---

实例方法 (Expose Methods)

通过 ref 获取组件实例也可调用以下方法：

方法名	说明
open(options)	以编程方式展示 Toast
close()	立即收起/隐藏当前 Toast