更新记录

0.0.1（2026-03-09） 下载此版本

更新日志

0.2.0

• 新增：open/close 事件与回调（组件与 API 皆可）
• 新增：自定义图标（字符/emoji）与图片图标（http/data/png/jpg/gif/webp）
• 新增：加载态自定义图片 loadingIcon
• 新增：文本换行策略 wordBreak（break-all、break-word、normal）
• 新增：遮罩行为优化，loading + mask=true 时阻断背景点击
• 保留：位置 top/center/bottom、单例/多例、默认项设置、动态更新 instance.message

0.1.0

• 初始化项目：uni-app（Vue3+TS）基础模板与插件 pluis-toast
• 提供基础 Toast 组件与示例页面

平台兼容性

uni-app(4.61)

pluis-toast（uni-app, Vue3 + TypeScript）

• 支持 HBuilderX 打开与编译
• 支持所有小程序、H5 与 App
• 以 uni_modules 插件形式提供 Toast 插件与示例

打开与运行

• HBuilderX：打开项目根目录识别 manifest.json 与 pages.json，选择目标平台运行/编译
• CLI（H5）：pnpm install → pnpm exec vite --host

目录

• 入口：main.ts、App.vue
• 页面：index
• 插件入口与组件：
  • index.ts
  • Toast.vue
  • ToastContainer.vue
• 配置：manifest.json、pages.json

使用方式

页面引入：

<script setup lang="ts">
import { ref } from 'vue'
import { PluisToast } from '/uni_modules/pluis-toast'
const toastRef = ref()
function show() {
  toastRef.value?.open('Hello', 2000)
}
</script>

<template>
  <button type="default" @click="show">显示Toast</button>
  <PluisToast ref="toastRef" />
</template>

API（与 Vant 风格一致）

import {
  showToast,
  showLoadingToast,
  showSuccessToast,
  showFailToast,
  closeToast,
  allowMultipleToast,
  setToastDefaultOptions,
  resetToastDefaultOptions
} from '/uni_modules/pluis-toast'

showToast('提示内容')
showLoadingToast({ content: '加载中...', duration: 0, mask: true })
showSuccessToast('成功文案')
showFailToast('失败文案')

// 动态更新（倒计时示例）
const t = showLoadingToast({ duration: 0, mask: true, content: '倒计时 3 秒' })
let second = 3
const timer = setInterval(() => {
  second--
  if (second) {
    ;(t as any).message = `倒计时 ${second} 秒`
  } else {
    clearInterval(timer)
    closeToast()
  }
}, 1000)

自定义图标/图片与加载图标：

showToast({ content: '自定义图标', icon: '❤' })
showToast({ content: '自定义图片', icon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png' })
showLoadingToast({
  content: '自定义加载图标',
  duration: 0,
  loadingIcon: 'https://fastly.jsdelivr.net/npm/@vant/assets/logo.png',
  mask: true
})

事件与换行：

showToast({
  content: '带事件回调\n第二行',
  wordBreak: 'break-word',
  onOpen: () => console.log('open'),
  onClose: () => console.log('close')
})

位置与遮罩：

showToast({ content: '顶部展示', position: 'top' })
showToast({ content: '底部展示', position: 'bottom' })
showLoadingToast({ content: '遮罩加载', duration: 0, mask: true }) // 背景不可点击

License

本项目遵循 MIT 许可，详见 LICENSE。

更新日志

• 详见 CHANGELOG.md

说明

• 采用 Vue3 + TypeScript。HBuilderX 直接识别 manifest.json 与 pages.json 进行跨端编译。