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

相关推荐
灵感__idea5 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴6 小时前
Mix
前端·webgl
代码续发6 小时前
前端组件梳理
前端
试图让你心动7 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 小时前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码7 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记7 小时前
sass中@mixin与 @include
前端·sass
陈琦鹏7 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数8 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante8 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端