当前位置：首页 > news >正文

uniapp 封装uni.showToast提示

news 2025/9/6 9:21:29

1、新建toastUtil.js文件，代码如下：

/*** Toast工具类，封装uni.showToast和uni.hideToast* 提供更灵活的Toast显示控制*/
export default {/*** 显示Toast提示* @param {Object} options - Toast配置项* @param {string} options.title - 提示内容* @param {string} [options.icon='none'] - 图标，支持none、success、loading、error* @param {number} [options.duration=2000] - 显示时长，单位ms* @param {string} [options.position='center'] - 位置，支持top、center、bottom* @param {string} [options.mask=false] - 是否显示透明蒙层，防止触摸穿透*/show(options) {// 先隐藏可能存在的Toastthis.hide();// 默认配置const defaultOptions = {title: '',icon: 'none',duration: 2000,position: 'center',mask: false};// 合并配置const toastOptions = { ...defaultOptions, ...options };// 调用uni的showToastuni.showToast(toastOptions);// 如果是加载中图标，不自动关闭（需要手动调用hide）if (toastOptions.icon === 'loading') {// 清除可能存在的定时器if (this.timer) {clearTimeout(this.timer);}} else {// 设置自动关闭定时器this.timer = setTimeout(() => {this.hide();}, toastOptions.duration);}},/*** 隐藏Toast*/hide() {uni.hideToast();// 清除定时器if (this.timer) {clearTimeout(this.timer);this.timer = null;}},/*** 快捷显示成功提示* @param {string} title - 提示内容* @param {number} [duration=2000] - 显示时长*/success(title, duration = 2000) {this.show({title,icon: 'success',duration});},/*** 快捷显示错误提示* @param {string} title - 提示内容* @param {number} [duration=2000] - 显示时长*/error(title, duration = 2000) {this.show({title,icon: 'error',duration});},/*** 快捷显示加载提示* @param {string} [title='加载中'] - 提示内容* @param {boolean} [mask=true] - 是否显示蒙层*/loading(title = '加载中', mask = true) {this.show({title,icon: 'loading',mask});}
};

2、在需要使用的页面引入：

import toastUtil from '@/utils/toastUtil.js';

3、基本使用：

// 显示普通提示
toastUtil.show({title: '操作成功',duration: 3000
});// 显示成功提示
toastUtil.success('提交成功');// 显示错误提示
toastUtil.error('操作失败，请重试');// 显示加载提示（需要手动关闭）
toastUtil.loading('正在加载数据...');// 关闭Toast（特别是用于关闭加载提示）
setTimeout(() => {toastUtil.hide();
}, 2000);