vue组件系列之通知组件
本页信息
页面访问量
0
评论数量 0
本页链接 点击复制
在进行网页开发时,您是否还在为无法及时优雅地反馈而烦恼?
优雅的vue消息通知组件为此而生
安装与使用
在普通vue项目中使用
安装依赖
在项目根目录执行
npmnpm install --save vue-toastificationpnpmpnpm install --save vue-toastificationyarnyarn add vue-toastification注册组件
main.jsimport { createApp } from "vue"; import Toast from "vue-toastification"; // Import the CSS or use your own! import "vue-toastification/dist/index.css"; const app = createApp(...); //配置选项 const options = { // You can set your default options here }; app.use(Toast, options);推荐配置
const options = { position: 'top-right', timeout: 3000, closeOnClick: true, pauseOnFocusLoss: true, pauseOnHover: true, draggable: true, draggablePercent: 0.6, showCloseButtonOnHover: false, hideProgressBar: false, transition: 'Vue-Toastification__slideBlurred', };在普通组件中使用
App.vue<script setup> import { useToast } from 'vue-toastification' const toast = useToast() const showToast = (message) => { toast.success(message) } </script> <template> <span style="cursor: pointer;" @click="showToast('这是一条成功消息')"> 显示成功消息 </span> </template>尝试一下
显示消息
点击显示消息
<script setup> import { useToast } from 'vue-toastification' const toast = useToast() const showToast = (type, message) => { toast[type](message) } </script> <template> <div style="display: flex;flex-direction: column;"> <span class="aaa" style="background-color: #4caf50;" @click="showToast('success', '这是一条成功消息')"> 点击显示成功消息 </span> <br /> <span class="aaa" style="background-color: #2196f3;" @click="showToast('info', '这是一条信息消息')"> 点击显示信息消息 </span> <br /> <span class="aaa" style="background-color: #ffc107ff;" @click="showToast('warning', '这是一条警告消息')"> 点击显示警告消息 </span> <br /> <span class="aaa" style="background-color: #ff5252;" @click="showToast('error', '这是一条错误消息')"> 点击显示错误消息 </span> </div> </template> <style scoped> .aaa { cursor: pointer; color: #fff; padding: 5px; border-radius: 5px; } </style>
在vuepress-theme-hope中使用
请看文章《在vuepress-theme-hope中使用vue-toastification(踩坑日记)》
进阶配置
参考文献
更新日志
2026/3/29 04:07
查看所有更新日志
81544-新增了两篇博文,修改了一些文件于
