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

相关推荐
开发加微信:hedian1166 分钟前
短剧小程序开发全攻略:从技术选型到核心实现(前端+后端+运营干货)
前端·微信·小程序
徐小夕@趣谈前端2 小时前
如何实现多人协同文档编辑器
javascript·vue.js·设计模式·前端框架·开源·编辑器·github
YCOSA20252 小时前
ISO 雨晨 26200.6588 Windows 11 企业版 LTSC 25H2 自用 edge 140.0.3485.81
前端·windows·edge
小白呀白2 小时前
【uni-app】树形结构数据选择框
前端·javascript·uni-app
吃饺子不吃馅3 小时前
深感一事无成,还是踏踏实实做点东西吧
前端·svg·图形学
90后的晨仔3 小时前
Mac 上配置多个 Gitee 账号的完整教程
前端·后端
少年阿闯~~4 小时前
CSS——实现盒子在页面居中
前端·css·html
开发者小天4 小时前
uniapp中封装底部跳转方法
前端·javascript·uni-app
阿波罗尼亚4 小时前
复杂查询:直接查询/子查询/视图/CTE
java·前端·数据库
武昌库里写JAVA4 小时前
SpringCloud与微服务
vue.js·spring boot·sql·layui·课程设计