VuePress完美整合Toast消息提示

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

相关推荐
正义的大古9 分钟前
OpenLayers常用控件 -- 章节七:测量工具控件教程
前端·javascript·vue.js·openlayers
Hashan40 分钟前
深入理解:Webpack编译原理
前端·webpack
雲墨款哥43 分钟前
一个前端开发者的救赎之路-JS基础回顾(五)-数组
前端·javascript·面试
朱程1 小时前
深入JS(一):手写 Promise
前端·javascript
Hierifer1 小时前
跨端技术:浅聊双线程原理和实现
前端
FreeBuf_1 小时前
加密货币武器化:恶意npm包利用以太坊智能合约实现隐蔽通信
前端·npm·智能合约
java水泥工2 小时前
基于Echarts+HTML5可视化数据大屏展示-图书馆大屏看板
前端·echarts·html5
EndingCoder2 小时前
Electron 性能优化:内存管理和渲染效率
javascript·性能优化·electron·前端框架
半夏陌离2 小时前
SQL 实战指南:电商订单数据分析(订单 / 用户 / 商品表关联 + 统计需求)
java·大数据·前端
子兮曰2 小时前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite