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
Table of contents Problem Description 1. Basic so...
Table of contents Install and introduce axios dep...
Preface Sometimes when hover pseudo-class adds a ...
Table of contents Browser kernel JavaScript Engin...
Last time we talked about some SQL query optimiza...
Recently, due to business adjustments in the comp...
1. Download the successfully generated icon file, ...
If you have installed the Win10 system and want t...
reason: MySQL 5.7.5 and up implements detection o...
Preface I feel like my mind is empty lately, as I...
MySQL escape Escape means the original semantics ...
Table of contents 1. DateTimePicker date selectio...
About the tree display of Vue, the project is use...
1. Configure local yum source 1. Mount the ISO im...
Method 1: Use the target event attribute of the E...