基于 Vue 超漂亮Toast提示组件Vue-Toastification

今天给小伙伴们推荐一款轻量级的小巧精致的vue.js提示组件VueToastification。

vue-toastification 基于Vue的Toast通知提示组件。基于TS语法，易于定制，支持Nuxt、Composition API及Vue3。

安装

$ npm i vue-toastification -S

引入插件

import Vue from "vue";
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";

const options = {
  // You can set your default options here
  position: 'top-right', //显示位置
  timeout: 3000, //关闭时间
  pauseOnHover: true, //鼠标滑过停止
  hideProgressBar: false, //隐藏关闭时间条
  closeButton: false, //显示关闭按钮
  ... //更多配置
};

Vue.use(Toast, options);

使用

this.$toast("I'm a toast!");
this.$toast.info("Info toast");
this.$toast.success("Success toast");
this.$toast.error("Error toast");
this.$toast.warning("Warning toast");

// Or with options
this.$toast("My toast content", {
  timeout: 2000,
  ... //更多配置
});

在 Composition API 中使用

Vue Toastification 同样也支持 Vue3.0 的 Composition API。

// App.vue
// Import from vue-toastification/composition, not vue-toastification
import { provideToast } from "vue-toastification/composition";
import "vue-toastification/dist/index.css";

setup() {
  // Pass the Plugin Options here
  provideToast({ timeout: 3000 });
  // This is similar to `Vue.use(Toast)`, but will not register `$toast` to the Vue instance.
}

// MyComponent.vue
import { useToast } from "vue-toastification/composition";

setup() {
  // Same interface as this.$toast
  const toast = useToast();
  
  const showToast = () => toast.success("I'm a toast!");
  const clearToasts = () => toast.clear();
  return { showToast, clearToasts };
}

渲染组件模板调用

// MyComponent.vue
<template>
  <button @click="$emit('close-toast')">Close Toast</button>
</template>

// OtherFile.vue
import MyComponent from "./MyComponent.vue";
this.$toast(MyComponent);

渲染 JSX 组件调用

const myJSX = (
  <div>
    <h1>My Title</h1>
    <span>My text</span>
  </div>
);
this.$toast(myJSX);

附上项目示例及仓库地址

# 演示地址
https://maronato.github.io/vue-toastification/

# 项目地址
https://github.com/Maronato/vue-toastification

好了，就分享到这里。希望对大家有些些协助。喜爱的话，多支持一下！