App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<template> <div> <h1>Vue3 Toastify - Toast Types Example</h1> <button @click="showDefaultToast">Default Toast</button> <button @click="showSuccessToast">Success Toast</button> <button @click="showErrorToast">Error Toast</button> <button @click="showInfoToast">Info Toast</button> <button @click="showWarningToast">Warning Toast</button> </div> </template> <script> import { toast } from "vue3-toastify"; import "vue3-toastify/dist/index.css"; export default { name: "App", setup() { const showDefaultToast = () => { toast("This is a default toast!", { autoClose: 2000, }); }; const showSuccessToast = () => { toast.success("This is a success toast!", { autoClose: 3000, position: "top-right", }); }; const showErrorToast = () => { toast.error("This is an error toast!", { autoClose: 3000, position: "top-left", }); }; const showInfoToast = () => { toast.info("This is an info toast!", { autoClose: 3000, position: "bottom-right", }); }; const showWarningToast = () => { toast.warning("This is a warning toast!", { autoClose: 3000, position: "bottom-left", }); }; return { showDefaultToast, showSuccessToast, showErrorToast, showInfoToast, showWarningToast, }; }, }; </script> |
