1. Project IntegrationOfficial website link: https://sweetalert2.github.io Case 1. CDN import method:Globally imported in index.html <script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> Location: npm installation method: npm install sweetalert2 2. Confirm box packagingConfirm = { show: function (message, callback) { Swal.fire({ title: 'Confirm?', text: message, icon: 'warning', showCancelButton: true, confirmButtonColor: '#3085d6', cancelButtonColor: '#d33', confirmButtonText: 'Yes, confirmed!' }).then((result) => { if (result.isConfirmed) { if (callback) { callback() } } }) } } 3. Prompt box packagingToast = { success: function (message) { Swal.fire({ position: 'top-end', icon: 'success', title: message, showConfirmButton: false, timer: 3000 }) }, error: function (message) { Swal.fire({ position: 'top-end', icon: 'error', title: message, showConfirmButton: false, timer: 3000 }) }, warning: function (message) { Swal.fire({ position: 'top-end', icon: 'warning', title: message, showConfirmButton: false, timer: 3000 }) } }; 4. Confirmation box usage/** * Click [Delete] */ del(id) { let _this = this Confirm.show("Deleted data cannot be restored, confirm deletion!", function () { Loading.show() _this.$api.delete('http://127.0.0.1:9000/business/admin/chapter/delete/' + id).then((res) => { Loading.hide() console.log("Delete chapter list result:", res) let resp = res.data if (resp.success) { _this.list(1) Swal.fire( 'Deleted successfully!', 'Deleted successfully! ', 'success' ) } }) }) 5. Use of message prompt box/** * Click [Save] */ save() { let _this = this Loading.show() _this.$api.post('http://127.0.0.1:9000/business/admin/chapter/save', _this.chapter).then((res) => { Loading.hide() console.log("Save chapter list results:", res) let resp = res.data if (resp.success) { $("#form-modal").modal("hide") _this.list(1) Toast.success("Save successfully!") } else { Toast.warning(resp.message) } }) } 6. Project EffectThis is the end of this article about vue integrated sweetalert2 prompt component. For more relevant vue integrated sweetalert2 content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: Detailed explanation of how to solve the problem of too long content in CSS
>>: Docker starts in Exited state
<br />Tips for making web table frames. ----...
Just like code, you can add comments to tables an...
Table of contents 1. Introduction 2. Interface 3....
Recently, when I was learning how to use webpack,...
This article example shares the specific implemen...
This article collects the fonts used in the logos...
This article example shares the specific code of ...
How to solve the Mysql transaction operation fail...
This article describes the Mysql self-join query....
Table of contents 1. DOM Diff 2. Add key attribut...
1. Download mysql-5.7.21-windowx64.zip from the o...
Table of contents environment Virtual Machine Ver...
Table of contents 1. Understanding 2. Use 1. h() ...
Table of contents Array deduplication 1. from() s...
1》Be good at web design 2》Know how to design web p...