当前位置：首页 > uni-app

uniapp 警告提示

2026-03-05 07:12:15uni-app

uniapp 警告提示的实现方法

在 uniapp 中实现警告提示可以使用 uni.showToast 或 uni.showModal 方法，具体取决于需求场景。

使用 uni.showToast 实现简单提示

uni.showToast({
    title: '警告信息内容',
    icon: 'none',
    duration: 2000
})

这种方式适合简短的警告信息展示，默认不显示图标，2秒后自动消失。

使用 uni.showModal 实现交互式警告

uni.showModal({
    title: '警告',
    content: '确认执行此操作吗？',
    confirmText: '确定',
    cancelText: '取消',
    success: function (res) {
        if (res.confirm) {
            console.log('用户点击确定');
        } else if (res.cancel) {
            console.log('用户点击取消');
        }
    }
})

这种方法适合需要用户确认的警告场景，提供确定和取消按钮。

自定义警告提示样式

如果需要更丰富的样式，可以通过自定义组件实现：

创建全局组件 warning-toast.vue


<template>
 <view class="custom-warning" v-if="show">
     <text>{{message}}</text>
 </view>
</template>

export default { data() { return { show: false, message: '' } }, methods: { showWarning(msg, duration = 2000) { this.message = msg this.show = true setTimeout(() => { this.show = false }, duration) } } } .custom-warning { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); background-color: #ffcc00; padding: 15px 30px; border-radius: 5px; color: #333; z-index: 9999; } ```

在页面中使用

this.$refs.warningToast.showWarning('自定义警告信息', 3000)

全局封装警告方法

为方便在整个项目中使用，可以在 main.js 中封装全局方法：

Vue.prototype.$showWarning = function(message, duration = 2000) {
    uni.showToast({
        title: message,
        icon: 'none',
        duration: duration,
        position: 'bottom'
    })
}

使用方式：

uniapp 警告提示