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