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

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

vue-sonner 🔔 An opinionated toast component for Vue. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-sonner

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的显示时长，实现持久化显示。

vue-sonner 🔔 An opinionated toast component for Vue. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-sonner