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

相关推荐
拓端研究室4 分钟前
视频讲解:门槛效应模型Threshold Effect分析数字金融指数与消费结构数据
前端·算法
工一木子1 小时前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W3 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程4 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏4 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083165 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头5 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js