LimeToast 轻提示

轻量级的 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()

组件说明

组件名	说明
l-toast	toast 基础组件，用于显示单个轻提示内容
l-toast-agent	toast 代理组件，用于在页面中放置，管理 toast 实例的显示与隐藏
lime-toast	toast 演示组件，用于查看示例效果和功能演示

快速预览

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

<!-- 代码位于 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

函数名	参数	说明
toast	options | message: string | ToastOptions	显示普通文本提示，支持直接传入文本或完整配置选项
success	message: string - 提示内容 options: ToastOptions - 配置选项（可选）	显示成功提示
warning	message: string - 提示内容 options: ToastOptions - 配置选项（可选）	显示警告提示
error	message: string - 提示内容 options: ToastOptions - 配置选项（可选）	显示错误提示
loading	message: string - 提示内容 options: ToastOptions - 配置选项（可选）	显示加载提示（默认不会自动关闭，需要手动调用 hide()）
hide	selector: string - 选择器（可选）	关闭当前显示的 toast
hideAll	selector: string - 选择器（可选）	关闭所有显示的 toast

配置项 (ToastOptions)

参数	说明	类型	默认值
message	提示内容	string	''
type	提示类型，可选值为 success warning error loading	string	-
duration	显示时长（毫秒），0 表示不会自动关闭	number	2000
position	显示位置，可选值为 top middle bottom	string	'middle'
direction	图标和文字的排列方向，可选值为 row column	string	'column'
overlay	是否显示遮罩层	boolean	false
overlayStyle	遮罩层样式	string | object	-
preventScrollThrough	是否防止触摸穿透	boolean	-
zIndex	层级	number	-
icon	自定义图标名称	string	-
iconColor	图标颜色	string	'white'
iconSize	图标大小	string	'20'
iconPrefix	图标前缀	string	-
selector	选择器	string	-
close	关闭时的回调函数(未实现)	function	-
success	显示成功后的回调函数(未实现)	function	-

组件 Props

参数	说明	类型	默认值
direction	图标和文字的排列方向，可选值为 row column	string	'row'
duration	显示时长（毫秒），0 表示不会自动关闭	number	2000
position	显示位置，可选值为 top middle bottom	string	'middle'
overlay	是否显示遮罩层	boolean	false
preventScrollThrough	是否防止触摸穿透	boolean	true
icon	自定义图标名称	string	undefined
iconPrefix	图标前缀	string	undefined
iconSize	图标大小	string	undefined
iconColor	图标颜色	string	undefined
message	提示内容	string	''
overlayStyle	遮罩层样式	string | object	undefined
zIndex	层级	number	undefined
selector	选择器	string	undefined
type	提示类型，可选值为 success warning error loading	string	undefined

主题定制

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

名称	默认值	描述
--l-toast-color	#fff	文本颜色
--l-toast-z-index	12001	层级
--l-toast-bg-color	rgba(0, 0, 0, 0.7)	背景颜色
--l-toast-max-width	700rpx	最大宽度
--l-toast-radius	$border-radius-lg	圆角
--l-toast-line-height	1.5	行高
--l-toast-row-icon-size	24px	行布局图标大小
--l-toast-column-icon-size	36px	列布局图标大小
--l-toast-padding-x	$spacer	行布局水平内边距
--l-toast-padding-y	$spacer-sm	行布局垂直内边距
--l-toast-column-radius	$border-radius-lg	列布局圆角
--l-toast-column-min-width	130px	列布局最小宽度
--l-toast-column-min-height	130px	列布局最小高度
--l-toast-column-padding	$spacer-md	列布局内边距

注意事项

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

支持与赞赏

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

支付宝赞助	微信赞助

源代码

组件源码