行为组件文档：useToast.js 使用指南
概述
useToast.js 是邮轮穿舱件管理系统小程序端的一个行为混入（Behavior）组件，专门用于统一管理 Toast 提示消息的显示和隐藏功能。该组件基于 TDesign 小程序组件库的 Toast 组件封装，提供标准化的消息提示接口。
组件结构分析
核心代码结构
import Toast, { hideToast } from 'tdesign-miniprogram/toast/index';
const useToastBehavior = Behavior({
methods: {
onShowToast(selector, message) {
Toast({
context: this,
selector,
message,
});
},
onHideToast(selector) {
hideToast({
context: this,
selector,
});
},
},
});
export default useToastBehavior;
类图分析
classDiagram
class useToastBehavior {
+onShowToast(selector, message)
+onHideToast(selector)
}
class TDesignToast {
+Toast(options)
+hideToast(options)
}
class PageComponent {
+data
+methods
+lifecycle
}
useToastBehavior --> TDesignToast : 依赖
PageComponent --|> useToastBehavior : 混入
功能详解
1. 显示 Toast 消息
方法签名： onShowToast(selector, message)
参数说明：
selector(string): Toast 组件的选择器标识符message(string): 要显示的提示消息内容
使用示例：
// 在页面中使用
this.onShowToast('#toast', '操作成功！');
2. 隐藏 Toast 消息
方法签名： onHideToast(selector)
参数说明：
selector(string): Toast 组件的选择器标识符
使用示例：
// 隐藏指定的 Toast
this.onHideToast('#toast');
集成使用方式
在页面中混入行为
// 页面文件示例
import useToastBehavior from '~/behaviors/useToast';
Page({
behaviors: [useToastBehavior],
data: {
// 页面数据
},
methods: {
// 页面方法
onButtonClick() {
// 显示成功提示
this.onShowToast('#successToast', '操作成功！');
// 2秒后自动隐藏
setTimeout(() => {
this.onHideToast('#successToast');
}, 2000);
}
}
});
在 WXML 模板中配置
<!-- 页面模板 -->
<view class="container">
<t-toast id="successToast" />
<button bindtap="onButtonClick">点击测试</button>
</view>
依赖关系分析
模块依赖图
flowchart TD
A[useToast.js] --> B[tdesign-miniprogram/toast/index]
C[页面组件] --> A
D[WXML模板] --> E[t-toast组件]
C --> D
style A fill:#e1f5fe
style B fill:#f3e5f5
执行流程分析
sequenceDiagram
participant Page as 页面组件
participant Behavior as useToastBehavior
participant Toast as TDesign Toast
participant UI as 界面渲染
Page->>Behavior: onShowToast(selector, message)
Behavior->>Toast: Toast({context, selector, message})
Toast->>UI: 渲染Toast消息
Note over Toast,UI: 显示提示消息
Page->>Behavior: onHideToast(selector)
Behavior->>Toast: hideToast({context, selector})
Toast->>UI: 隐藏Toast消息
Note over Toast,UI: 隐藏提示消息
最佳实践
1. 统一消息管理
建议在项目中统一使用 useToastBehavior 来管理所有 Toast 消息，确保消息提示风格的一致性。
2. 错误处理模式
// 推荐的使用模式
async submitForm() {
try {
await this.validateForm();
this.onShowToast('#success', '提交成功！');
} catch (error) {
this.onShowToast('#error', error.message);
}
}
3. 性能优化建议
- 避免频繁调用 Toast 显示/隐藏
- 合理设置 Toast 显示时长
- 使用不同的 selector 来区分不同类型的提示
与其他组件的集成
与消息组件对比
| 组件类型 | 使用场景 | 持续时间 | 交互性 |
|---|---|---|---|
| useToast | 操作反馈、状态提示 | 短时自动消失 | 无交互 |
| Message 组件 | 重要通知、系统消息 | 手动关闭 | 可交互 |
在项目中的实际应用
从代码分析可见，项目中同时使用了 Toast 和 Message 两种提示方式：
- Toast: 用于短暂的操作反馈（如登录成功提示）
- Message: 用于重要的系统消息通知
故障排除
常见问题
-
Toast 不显示
- 检查 selector 是否正确配置
- 确认 t-toast 组件已正确引入
-
消息重叠显示
- 使用不同的 selector 区分消息类型
- 确保在显示新消息前隐藏旧消息
调试技巧
// 调试模式下的增强版本
onShowToast(selector, message) {
console.log(`显示Toast: ${message}`, { selector });
Toast({
context: this,
selector,
message,
});
}
索引
useToast.js 行为组件为小程序提供了一套标准化、易用的消息提示解决方案。通过行为混入模式，开发者可以轻松地在任何页面中集成 Toast 功能，同时保持代码的整洁和可维护性。
参考源文件：
该组件与 TDesign 小程序组件库深度集成，提供了良好的类型支持和主题定制能力，是构建高质量小程序应用的重要基础组件。