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'
})
}
}
}
👉 查看演示效果