How to solve the problem of vue integrating sweetalert2 prompt components

This article mainly introduces how to solve the problem of vue integrated sweetalert2 prompt components, the article is very detailed, has a certain reference value, interested friends must read it!

I. Project integration

Official website link: https://sweetalert2.github.io

Case

1. Introduction method CDN introduction method:

Global introduction in index.html

Location:

Npm installation method:

Npm install sweetalert22. The confirmation box encapsulates Confirm = {show: function (message, callback) {Swal.fire ({title: 'confirm?', text: message, icon: 'warning', showCancelButton: true, confirmButtonColor:' # 3085d6 confirmation, cancelButtonColor:'# d33 confirmation, confirmButtonText: 'yes Confirmed!'}). Then ((result) = > {if (result.isConfirmed) {if (callback) {callback ()})} 3. Prompt box encapsulates Toast = {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. Confirm box using / * Click [delete] * / del (id) {let _ this = this Confirm.show ("cannot be recovered after deletion, 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 big chapter list result:" Res) let resp = res.data if (resp.success) {_ this.list (1) Swal.fire ('deleted successfully!', 'deleted successfully!' , 'success')}})}) 5. The message prompt box uses / * 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 big chapter list results:" Res) let resp = res.data if (resp.success) {$("# form-modal"). Modal ("hide") _ this.list (1) Toast.success ("saved successfully!") } else {Toast.warning (resp.message)}})} 6. Project effect

These are all the contents of this article entitled "how to solve the problem of integrating sweetalert2 prompt components in vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!