Vue Toastification | 一款基于vue 3.x的轻量级提示条通知组件

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"
});			
		

github网址：https://github.com/Maronato/vue-toastification