main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import VueSweetalert2 from 'vue-sweetalert2'; // If you don't need the styles, do not connect import 'sweetalert2/dist/sweetalert2.min.css'; const app = createApp(App); app.use(VueSweetalert2) // 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 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 |
<template> <div> <button @click="basicAlert">Basic Alert</button> <button @click="titleTextHtmlAlert">Title, Text, and HTML Alert</button> <button @click="successAlert">Success Alert</button> <button @click="errorAlert">Error Alert</button> <button @click="warningAlert">Warning Alert</button> <button @click="infoAlert">Info Alert</button> <button @click="questionAlert">Question Alert</button> <button @click="customImageAlert">Custom Image Alert</button> <button @click="customFooterAlert">Custom Footer Alert</button> <button @click="confirmCancelAlert">Confirmation Alert</button> </div> </template> <script> export default { methods: { basicAlert() { this.$swal('This is a basic alert!'); }, titleTextHtmlAlert() { this.$swal({ title: '<strong>HTML <u>example</u></strong>', icon: 'info', html: 'You can use <b>bold text</b>, <a href="https://sweetalert2.github.io">links</a>, and more!', showCloseButton: true, showCancelButton: true, focusConfirm: false, confirmButtonText: '<i class="fa fa-thumbs-up"></i> Great!', cancelButtonText: '<i class="fa fa-thumbs-down"></i>', }); }, successAlert() { this.$swal({ icon: 'success', title: 'Success!', text: 'Your operation was successful.', }); }, errorAlert() { this.$swal({ icon: 'error', title: 'Error!', text: 'Something went wrong!', }); }, warningAlert() { this.$swal({ icon: 'warning', title: 'Warning!', text: 'This action is irreversible.', }); }, infoAlert() { this.$swal({ icon: 'info', title: 'Information', text: 'Here is some important info.', }); }, questionAlert() { this.$swal({ icon: 'question', title: 'Question', text: 'Do you like Vue.js?', }); }, customImageAlert() { this.$swal({ title: 'Sweet!', text: 'This is a custom image alert.', imageUrl: 'https://via.placeholder.com/150', imageWidth: 150, imageHeight: 150, imageAlt: 'Custom image', }); }, customFooterAlert() { this.$swal({ title: 'Footer Alert', text: 'This alert has a custom footer.', footer: '<a href="https://sweetalert2.github.io">Why do I have this issue?</a>', }); }, confirmCancelAlert() { this.$swal({ title: 'Are you sure?', text: "You won't be able to revert this!", icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, delete it!', cancelButtonText: 'Cancel', }).then((result) => { if (result.isConfirmed) { this.$swal('Deleted!', 'Your file has been deleted.', 'success'); } }); }, }, }; </script> |
