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 57 58 59 60 61 62 63 64 65 66 |
<template> <div> <h1>v-dialogs Example</h1> <button @click="showAlert">Show Alert</button> <button @click="showMessage">Show Message</button> <button @click="showToast">Show Toast</button> <button @click="openModal">Open Modal</button> <button @click="openDrawer">Open Drawer</button> <button @click="showMask">Show Mask</button> </div> </template> <script> import { DialogAlert, DialogMessage, DialogToast, DialogModal, DialogMask, } from "v-dialogs"; import UserProfile from "./UserProfile.vue"; // Example component for Modal/Drawer export default { methods: { showAlert() { DialogAlert( "This is an alert message!", () => { console.log("Alert dismissed!"); }, { messageType: "info" } ); }, showMessage() { DialogMessage("This is a success message!", { messageType: "success" }); }, showToast() { DialogToast("This is a toast message!", { messageType: "warning" }); }, openModal() { DialogModal(UserProfile, { width: 600, height: 400, title: "User Profile", callback: (data) => { DialogAlert(`Modal callback data: ${data}`); }, }); }, openDrawer() { DialogModal(UserProfile, { width: 300, position: "right", title: "User Drawer", params: { userId: 2 }, }); }, showMask() { const destroy = DialogMask("Loading..."); setTimeout(() => { destroy(); // Remove the mask DialogMessage("Data loaded successfully!", { messageType: "success" }); }, 2000); }, }, }; </script> |
