VuePress完美整合Toast消息提示

程序员-小李2025-06-08 9:05

VuePress 整合 Vue-Toastification 插件笔记

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

一、安装依赖

bash 复制代码

npm install vue-toastification

或者使用 yarn：

bash 复制代码

yarn add vue-toastification

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

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

ts 复制代码

// 引入 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 调用提示：

vue 复制代码

<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：点我前往