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

当前位置:主页 > Vue > Vue组件 > Vue Toastification | 一款基于vue 3.x的轻量级提示条通知组件
Vue Toastification | 一款基于vue 3.x的轻量级提示条通知组件
分享:

    插件介绍

    Vue Toastification是一款基于vue 3.x的轻量级、易用且美观的提示条通知组件。

    浏览器兼容性

    浏览器兼容性
    时间:05-26
    阅读:
简要教程

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