uniapp提示插件

uniapp 常用提示插件及使用方法

uni.showToast

用于显示轻量级提示，通常用于操作反馈。
基本语法：

uni.showToast({
  title: '提示内容',
  icon: 'none', // 可选值：success, loading, none
  duration: 1500 // 显示时长（毫秒）
})

实际应用示例：

// 提交表单成功提示
uni.showToast({
  title: '提交成功',
  icon: 'success'
})

uni.showModal

用于显示模态对话框，包含确认和取消按钮。
典型用法：

uni.showModal({
  title: '提示',
  content: '确定要删除吗？',
  success(res) {
    if (res.confirm) {
      console.log('用户点击确定')
    }
  }
})

uni.showLoading

显示加载提示框，需手动调用hideLoading关闭。
使用场景：

// 开始加载数据时显示
uni.showLoading({
  title: '加载中'
})

// 数据加载完成后隐藏
uni.hideLoading()

uView UI的Toast组件

需安装uView UI库后使用，提供更多样式选择。
安装后调用方式：

this.$u.toast('操作成功')

自定义提示组件

通过创建全局组件实现个性化提示：

1. 创建components/toast.vue文件
2. 在main.js中注册为全局组件
3. 通过ref调用组件方法

示例调用代码：

this.$refs.toast.show('自定义内容', 2000)

选择建议

• 简单提示优先使用uni.showToast
• 需要用户确认时使用uni.showModal
• 加载状态使用uni.showLoading
• 需要丰富样式时考虑uView等UI库
• 高度定制化需求建议开发自定义组件

注意事项

• H5端部分样式可能需要额外调整
• 小程序平台有默认图标样式限制
• 避免频繁调用提示防止界面闪烁
• 多语言项目需动态设置提示内容