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

Tips for making web table frames

<br />Tips for making web table frames. ----...

MySQL table and column comments summary

Just like code, you can add comments to tables an...

JavaScript Reflection Learning Tips

Table of contents 1. Introduction 2. Interface 3....

How to debug loader plugin in webpack project

Recently, when I was learning how to use webpack,...

Detailed explanation of how to use WeChat mini program map

This article example shares the specific implemen...

Collection of 25 fonts used in famous website logos

This article collects the fonts used in the logos...

JS realizes the case of eliminating stars

This article example shares the specific code of ...

How to solve the Mysql transaction operation failure

How to solve the Mysql transaction operation fail...

Detailed explanation of Mysql self-join query example

This article describes the Mysql self-join query....

Detailed explanation of key uniqueness of v-for in Vue

Table of contents 1. DOM Diff 2. Add key attribut...

Navicat connection MySQL error description analysis

Table of contents environment Virtual Machine Ver...

Detailed explanation of the use of Vue h function

Table of contents 1. Understanding 2. Use 1. h() ...

12 Useful Array Tricks in JavaScript

Table of contents Array deduplication 1. from() s...

7 skills that great graphic designers need to master

1》Be good at web design 2》Know how to design web p...