Vue Toastification是一款基于vue 3.x的轻量级、易用且美观的提示条通知组件。
如果你想在vue2中使用它,可以使用Vue Toastification v1
它的特点有:
- 支持新的Composition API和Vue 3
- 完全用Typescript编写
- RTL支持
- 可以使用自定义组件或jsx作为提示条内容
- 自定义提示条过滤和带有生命周期钩子的队列
- 支持以编程方式移除或更新提示条通知组件
- 进度栏显示剩余时间
- 当窗口失去焦点时,支持暂停提示条
- 可以自定义的主题和动画
使用方法
安装
如果您想使用Vue Toastification toast插件,首先您需要安装它,命令如下:
yarn add vue-toastification@next // 或者 npm install --save vue-toastification@next
使用
全局引用
// main.js import { createApp } from "vue"; import Toast from "vue-toastification"; // Import the CSS or use your own! import "vue-toastification/dist/index.css"; const app = createApp(...); const options = { // You can set your default options here }; app.use(Toast, options);
或者使用 Typescript
import { createApp } from "vue"; import Toast, { PluginOptions } from "vue-toastification"; // Import the CSS or use your own! import "vue-toastification/dist/index.css"; const app = createApp(...); const options: PluginOptions = { // You can set your default options here }; app.use(Toast, options);
要使用Vue Toastification提示条通知插件,仅需要导入useToast
,然后再实例化它即可。
import { useToast } from "vue-toastification"; export default { setup() { // Get toast interface const toast = useToast(); // Use it! toast("I'm a toast!"); // or with options toast.success("My toast content", { timeout: 2000 }); // These options will override the options defined in the "app.use" plugin registration for this specific toast // Make it available inside methods return { toast } }, methods: { myMethod() { // Since you returned `toast` from setup(), you can access it now this.toast.info("I'm an info toast!"); } } }
Toast类型
toast("Default toast"); toast.info("Info toast"); toast.success("Success toast"); toast.error("Error toast"); toast.warning("Warning toast"); // You can also set the type programmatically when calling the default toast import { TYPE } from "vue-toastification"; toast("Also a success toast", { type: TYPE.SUCCESS // or "success", "error", "default", "info" and "warning" });