uni-app vue3 uni.showToast 真机弹出后不会消失

uni-app vue3 uni.showToast 真机弹出后不会消失

开发环境 版本号 项目创建方式
Windows win10 2004 HBuilderX

示例代码：

const toast = {
    show(options) {
        const defaultOptions = {
            title: '',
            icon: 'none',
            duration: 2000,
            mask: false
        }
        const toastOptions = Object.assign({}, defaultOptions, options)
        // 处理预设类型
        if (toastOptions.type) {
            switch (toastOptions.type) {
                case 'success':
                    toastOptions.icon = 'success'
                    toastOptions.image = '/static/image/success.png'
                    break
                case 'error':
                    toastOptions.icon = 'error'
                    toastOptions.image = '/static/image/fial.png'
                    break
                case 'loading':
                    toastOptions.icon = 'loading'
                    break
            }
        }
        uni.showToast(toastOptions)
    },
    // 快捷方法
    success(title, duration = 2000) {
        this.show({
            title,
            type: 'success',
            duration
        })
    },
    error(title, duration = 2000) {
        this.show({
            title,
            type: 'error',
            duration
        })
    },
    loading(title = '加载中...', duration = 60000) {
        this.show({
            title,
            type: 'loading',
            duration
        })
    },  
    hide() {  
        uni.hideToast()  
    }  
}
export default toast

man.js 文件
app.config.globalProperties.$toast = toast

页面使用
tcBtn(){
    this.$toast.success('测试弹窗')
},

bug描述：

uniapp vue3 uni.showToast 真机弹出后，不会消失

复现录屏.zip


更多关于uni-app vue3 uni.showToast 真机弹出后不会消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

稍等我试下

更多关于uni-app vue3 uni.showToast 真机弹出后不会消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不加image 是正常的，加了image 就会出现这个问题

把你的 type 改为 messageType 试试
show({
title,
messageType: ‘success’,
duration
})

我这样写可以正常运行
function show(options) {
const defaultOptions = {
title: ‘’,
icon: ‘none’,
duration: 2000,
mask: false,
}
const toastOptions = Object.assign({}, defaultOptions, options)

if (toastOptions.messageType) {  
    switch (toastOptions.messageType) {  
        case 'success':  
            toastOptions.icon = 'success'  
            toastOptions.image = '/static/logo.png'  
            break  
        case 'error':  
            toastOptions.icon = 'error'  
            toastOptions.image = '/static/logo.png'  
            break  
        case 'loading':  
            toastOptions.icon = 'loading'  
            break  
    }  
}  

uni.showToast(toastOptions)

}

// 快捷方法
export function success(title, duration = 2000) {
show({
title,
messageType: ‘success’,
duration
})
}

好的 我试试

回复 2***@qq.com: 我刚刚试了，没啥问题，你写的type属性，把showToast内部的type属性给覆盖了

const toast = {
show(options) {
const defaultOptions = {
title: ‘’,
icon: ‘none’,
duration: 2000,
mask: false
}
const toastOptions = Object.assign({}, defaultOptions, options)
// 处理预设类型
if (toastOptions.messageType) {
switch (toastOptions.messageType) {
case ‘success’:
toastOptions.icon = ‘success’
toastOptions.image = ‘/static/logo.png’
break
case ‘error’:
toastOptions.icon = ‘error’
toastOptions.image = ‘/static/logo.png’
break
case ‘loading’:
toastOptions.icon = ‘loading’
break
}
}
uni.showToast(toastOptions)
},
// 快捷方法
success(title, duration = 2000) {
this.show({
title,
messageType: ‘success’,
duration
})
},
error(title, duration = 2000) {
this.show({
title,
messageType: ‘error’,
duration
})
},
loading(title = ‘加载中…’, duration = 60000) {
this.show({
title,
messageType: ‘loading’,
duration
})
},
}

另外，关闭 loading 要主动关闭，参考文档 https://uniapp.dcloud.net.cn/api/ui/prompt.html#showloading

感谢

这是一个常见的uni.showToast在真机上的表现问题。根据您提供的代码和描述，我分析可能的原因和解决方案：

  1. 最常见的原因是duration参数设置不当。虽然您设置了2000ms，但真机上可能需要明确指定duration才能正常工作。

  2. 建议修改show方法中的toastOptions处理：

const toastOptions = {
    title: options.title || defaultOptions.title,
    icon: options.icon || defaultOptions.icon,
    duration: options.duration !== undefined ? options.duration : defaultOptions.duration,
    mask: options.mask || defaultOptions.mask
}
  1. 对于Vue3环境，确保全局挂载方式正确：
// main.js
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.globalProperties.$toast = toast
app.mount('#app')
  1. 真机调试时，建议先使用基础配置测试：
uni.showToast({
    title: '测试',
    duration: 2000
})
回到顶部