vue3-snackbar简单vue消息提示组件

最新推荐文章于 2026-04-03 14:38:39 发布

转载最新推荐文章于 2026-04-03 14:38:39 发布 · 1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.htmleaf.com/vue/vue-component/202302105902.html

标签

#vue组件 #vue消息提示 #消息提示

Vue 专栏收录该内容

6 篇文章

订阅专栏

Vue3-Snackbar是一个用于Vue3的应用程序，提供简单的消息提示功能，包括消息、成功、警告和错误四种状态，支持自定义位置和阴影等参数。用户可以通过npm或yarn安装，然后在main.js中引入并配置。组件支持CompositionAPI和OptionsAPI两种使用方式，方便添加和管理snackbar消息。

vue3-snackbar是一款vue3的简单消息提示组件。vue3-snackbar提供消息、成功、警告和错误4种消息状态，以及提供位置、阴影等多种参数。

使用方法如下：

安装

// npm        
npm install vue3-snackbar
// yarn
yarn add vue3-snackbar

使用

// main.js
import { createApp } from "vue";
import { SnackbarService, Vue3Snackbar } from "vue3-snackbar";
import "vue3-snackbar/dist/style.css";
import App from "./App.vue";
const app = createApp(App);
app.use(SnackbarService);
app.component("vue3-snackbar", Vue3Snackbar);
app.mount("#app");

<!--App.vue-->
<template>
    <teleport to="body">
        <vue3-snackbar bottom right :duration="4000"></vue3-snackbar>
    </teleport>
</template>

//js
// Composition API
import { useSnackbar } from "vue3-snackbar";
const snackbar = useSnackbar();
snackbar.add({
    type: 'success',
    text: 'This is a snackbar message'
})
// ============================================
// Options API
export default {
    methods: {
        successMessage() {
            this.$snackbar.add({
                type: 'success',
                text: 'This is a snackbar message'
            })
        }
    }
}

👉 查看演示效果