首页
/ Vue-sonner:一个功能丰富的Vue Toast组件

Vue-sonner:一个功能丰富的Vue Toast组件

2026-01-29 12:32:14作者:昌雅子Ethen

Vue-sonner 是一个为 Vue 和 Nuxt 应用程序设计的先进 Toast 组件。该项目主要使用 TypeScript 编程语言开发,提供了丰富的配置选项和易于使用的API,允许开发者快速集成并自定义Toast通知。

核心功能

  • 多样化的通知类型:支持默认、成功、错误、带有操作的Toast,以及加载状态的Promise Toast。
  • 自定义Toast内容:可以传入Vue组件来自定义Toast的显示内容。
  • 丰富的配置选项:支持自定义主题、位置、显示时长、偏移量等。
  • 响应式设计:自动适应不同屏幕尺寸。
  • 动画效果:提供滑动消失的动画效果。
  • 键盘交互:支持键盘操作,如通过Escape键关闭Toast。

最近更新的功能

  • Headless Toast模式:提供了一种不包含默认样式的新模式,允许开发者完全自定义Toast的样式和布局。
  • Theme主题自定义:增加了对Toast主题的自定义支持,使得Toast的视觉效果可以和应用程序的风格保持一致。
  • Position位置配置:扩展了Toast显示位置的配置选项,提供了更多灵活性。
  • Expanded扩展模式:允许同时显示更多Toast通知。
  • Styling样式自定义:支持通过toastOptions属性全局或单个自定义Toast的样式。
  • Tailwind CSS支持:通过unstyled属性,Toast组件可以与Tailwind CSS配合使用,方便开发者使用喜欢的CSS框架进行样式定制。
  • Icon图标自定义:允许通过slots来自定义各种状态下的图标显示。
  • Close Button关闭按钮:增加了在Toast上显示关闭按钮的选项,提高用户体验。
  • Rich Colors丰富色彩:为成功和错误状态的Toast提供了更丰富的颜色选项。
  • Custom Offset自定义偏移:允许设置Toast相对于屏幕边缘的偏移量。
  • On Close Callback关闭回调:增加了关闭Toast时的回调函数,以便于执行清理或跟踪等后续操作。
  • Persisting Toasts持久化Toast:通过设置duration属性,可以控制Toast的显示时长,实现持久化显示。
登录后查看全文
热门项目推荐
相关项目推荐

项目优选

收起