vue组件系列之通知组件

约 569 字大约 2 分钟

vuejs 教程组件

2026-03-15

本页信息

页面访问量

评论数量 0

本页链接点击复制

在进行网页开发时，您是否还在为无法及时优雅地反馈而烦恼？
优雅的vue消息通知组件为此而生

安装与使用

在普通vue项目中使用

安装依赖

在项目根目录执行

npm

npm install --save vue-toastification

pnpm

pnpm install --save vue-toastification

yarn

yarn add vue-toastification

注册组件

main.js

import { 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>