VuePress完美整合Toast消息提示

VuePress 整合 Vue-Toastification 插件笔记

记录如何在 VuePress 项目中整合使用 vue-toastification 插件，实现优雅的消息提示。

一、安装依赖

npm install vue-toastification

或者使用 yarn：

yarn add vue-toastification

二、配置 VuePress 客户端增强文件

在 VuePress 项目的 .vuepress 目录下创建或编辑 enhanceApp.js 文件：

// 引入 Toast 插件和样式
import Toast from "vue-toastification";
import "vue-toastification/dist/index.css";export default ({ Vue }) => {// 全局注册组件Vue.component('MyGlobalComponent', MyGlobalComponent);// 注册 Toast 插件Vue.use(Toast, {// 可选的配置项position: "top-right",timeout: 10000,closeOnClick: true,pauseOnHover: true,});
}

三、页面中使用示例

在任意 .vue 文件或 Markdown 文件中使用时，可以通过 this.$toast 调用提示：

<template><button @click="showToast">点击提示</button>
</template><script>
function showToast() {this.$toast('xxx')this.$toast.success('xxx')this.$toast.info('xxx');this.$toast.warning('xxx');this.$toast.error('xxx');
}
</script>

通过以上配置 并使用 vue-toastification，我们可以轻松地为 VuePress 项目添加友好的通知提示功能，适用于各种用户交互场景，如表单提交、请求成功或错误提示等。

---

如果你需要更复杂的用法，比如自定义样式、不同类型的提示，可以参考

官方GitHub：点我前往