更新记录

0.0.3（2025-12-15）

• chore: 更新依赖

0.0.2（2025-12-15）

• feat: 更新依赖

0.0.1（2025-12-15）

• init

平台兼容性

uni-app(4.81)

uni-app x(4.81)

lime-toast 轻提示

轻量级的 toast 组件，用于轻量级反馈或提示，不会打断用户操作，兼容 uniapp/uniappx。

插件依赖：lime-style、lime-shared、lime-overlay、lime-icon。

文档链接

📚 组件详细文档请访问以下站点：

• Toast 文档 - 站点1
• Toast 文档 - 站点2
• Toast 文档 - 站点3

安装方法

1. 在 uni-app 插件市场中搜索并导入 lime-toast
2. 导入后可能需要重新编译项目
3. 在页面中使用 l-toast 组件（组件）或 lime-toast（演示）

代码演示

基础用法

在页面中放置 l-toast-agent 组件，然后通过 API 调用显示提示。

<template>
  <!-- 在页面放轻提示代理 -->
  <l-toast-agent></l-toast-agent>
</template>

import { toast, type ToastOptions } from '@/uni_modules/lime-toast'

// 显示普通文本提示
toast({
  message: '这是一条提示信息',
  duration: 2000,
  position: 'middle'
} as ToastOptions)

// 或直接传入文本
toast('这是一条提示信息')

不同类型的提示

支持多种预设类型的提示样式。

import { toast, success, warning, error, loading, type ToastOptions } from '@/uni_modules/lime-toast'

// 普通文本提示
toast('普通提示')

// 成功提示
success('操作成功')

// 警告提示
warning('警告信息')

// 错误提示
error('操作失败')

// 加载提示（不会自动关闭）
loading('加载中...')

自定义位置

可以设置提示框的显示位置。

import { toast, type ToastOptions } from '@/uni_modules/lime-toast'

// 顶部显示
toast({
  message: '顶部提示',
  position: 'top'
} as ToastOptions)

// 中间显示
toast({
  message: '中间提示',
  position: 'middle'
} as ToastOptions)

// 底部显示
toast({
  message: '底部提示',
  position: 'bottom'
} as ToastOptions)

自定义图标和方向

可以自定义图标和文字的排列方向。

import { toast, type ToastOptions } from '@/uni_modules/lime-toast'

// 自定义图标和方向
toast({
  message: '自定义图标',
  icon: 'checkmark-circle',
  direction: 'row', // row 或 column
  iconColor: '#4CAF50',
  iconSize: 24
} as ToastOptions)

手动控制关闭

可以手动关闭提示，或者设置不自动关闭。

import { loading, hide, hideAll, type ToastOptions } from '@/uni_modules/lime-toast'

// 显示加载提示（不自动关闭）
loading({
  message: '加载中...',
  duration: 0
} as ToastOptions)

// 手动关闭当前提示
setTimeout(() => {
  hide()
}, 3000)

// 或者关闭所有提示
// hideAll()

组件说明

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-toast/components/lime-toast -->
<lime-toast />

Vue2 使用说明

本插件使用了 composition-api，如需在 Vue2 项目中使用，请按照官方教程配置。

关键配置代码（在 main.js 中添加）：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API 文档

函数 API

配置项 (ToastOptions)

组件 Props

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

注意事项

1. 每个页面只能放置一个 l-toast-agent 组件
2. 使用 loading 类型时，默认不会自动关闭，需要手动调用 hide()
3. 在页面卸载时，组件会自动移除事件监听，无需手动处理
4. 支持同时显示多个 toast 实例，它们会按照显示顺序依次排列
5. 主题定制时，建议使用 CSS 变量的方式覆盖，避免直接修改组件源码

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：	支付宝赞助	微信赞助