main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import VuejsDialog from "vuejs-dialog"; import "vuejs-dialog/dist/vuejs-dialog.min.css"; const app = createApp(App); app.use(VuejsDialog) // Mount the app app.mount("#app"); |
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 |
<template> <div> <h1>Vue.js Dialog Plugin Example</h1> <button @click="showAlert">Show Alert</button> <button @click="showConfirm">Show Confirm</button> <button @click="showPrompt">Show Prompt</button> </div> </template> <script> export default { methods: { // Example: Alert dialog showAlert() { this.$dialog.alert("This is a simple alert!").then(() => { console.log("Alert closed"); }); }, // Example: Confirm dialog showConfirm() { this.$dialog .confirm("Are you sure you want to proceed?") .then(() => { console.log("User confirmed"); }) .catch(() => { console.log("User canceled"); }); }, // Example: Prompt dialog showPrompt() { this.$dialog .prompt({ title: "Enter your name", body: "Please provide your name below:", promptHelp: 'Type your name and click "Proceed"', }) .then((dialog) => { console.log("User input:", dialog.data); this.$dialog.alert(`Hello, ${dialog.data || "[empty]"}!`); }) .catch(() => { console.log("Prompt dismissed"); }); }, }, }; </script> |
