Let's talk about the problem of Vue integrating sweetalert2 prompt component

Let's talk about the problem of Vue integrating sweetalert2 prompt component

insert image description here
insert image description here

1. Project Integration

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

insert image description here

Case

insert image description here
insert image description here

1. CDN import method:

Globally imported in index.html

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script> 

insert image description here

Location:

insert image description here

npm installation method:

npm install sweetalert2

2. Confirm box packaging

Confirm = {
    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 packaging

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. 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 Effect

insert image description here
insert image description here

This 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:
  • Implementation of Vue custom ring tone reminder component
  • The simplest way to use vue message prompt global component
  • Vue custom prompt box (Toast) component implementation code
  • Detailed examples of using common tips or loading components in vue-cli projects
  • Vue's global prompt box component instance code
  • Example of using Vue.extend to build a message prompt component
  • Vue.js implements a beautiful, flexible and reusable prompt component example
  • Prompt component of vue.js
  • Use SVG to encapsulate the global message prompt component in Vue

<<:  Detailed explanation of how to solve the problem of too long content in CSS

>>:  Docker starts in Exited state

Recommend

Several ways to set the expiration time of localStorage

Table of contents Problem Description 1. Basic so...

Several common methods of sending requests using axios in React

Table of contents Install and introduce axios dep...

How to solve the element movement caused by hover-generated border

Preface Sometimes when hover pseudo-class adds a ...

Let you understand the working principle of JavaScript

Table of contents Browser kernel JavaScript Engin...

How to handle super large form examples with Vue+ElementUI

Recently, due to business adjustments in the comp...

favico.ico---Website ico icon setting steps

1. Download the successfully generated icon file, ...

How to build a K8S cluster and install docker under Hyper-V

If you have installed the Win10 system and want t...

Detailed explanation of MySQL injection without knowing the column name

Preface I feel like my mind is empty lately, as I...

Detailed use cases of MySql escape

MySQL escape Escape means the original semantics ...

Summarize the problems encountered in using Vue Element UI

Table of contents 1. DateTimePicker date selectio...

React gets input value and submits 2 methods examples

Method 1: Use the target event attribute of the E...