Record their common code, occasionally take a look, if there is wrong or can improve the place can be timely comments, thank you for watching!

When doing background, the following pop-up box components are often used:

Code block (referencing elementUI code) :

<template>
    <el-button type="text" @click="open">Click to open the Message Box</el-button>
</template>

<script>
    export default {
        methods: { 
            open() {
                this.$confirm('This operation will permanently delete the file. Do you want to continue? '.'tip', {
                confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning' 
              }).then(() = > {
                this.$message({
                type: 'success'.message: 'Deleted successfully! '
              });
            }).catch(() = > {
                this.$message({ 
                type: 'info'.message: 'Cancelled delete'}); }); }}}</script>
Copy the code

In terms of the amount of code in a single bullet frame, it is indeed not much, but if the bullet frame needs to be executed every time before saving, modifying, deleting and other operations, then the amount of invalid code in the script will increase (in my opinion), so I made a transformation of this structure.

We’ll use the MessageBox popup and the Message prompt, so after creating the index.js file we’ll import the following and create the confirmBox method:

import { Message, MessageBox } from 'element-ui'

export confirmBox(){}export default {
  confirmBox
}
Copy the code

Let's leave the example elementui shows us for a moment, just for reference.

Encapsulate steps

1. Introduce MessgaeBox and Message and generate ordinary popboxes (prompt text and other data are dead)

import { Message, MessageBox } from 'element-ui'

export confirmBox(){
     MessageBox.confirm('This operation will permanently delete the file. Do you want to continue? '.'tip', {
        confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning' 
      }).then(() = > {
        Message({
          showClose: true.type: 'success'.message: 'Deleted successfully'
       })
    }).catch((response) = > {
        Message({
          showClose: true.type: 'info'.message: 'Cancelled delete'})})}export default {
  confirmBox
}
Copy the code

At this point, the prompt box like the one in the header of the article has been modified for MessageBox and Message to the reference code element gave us

MessageBox. Confirm is equivalent to this.$confirm

Message is equivalent to this.$Message

2. Extract important words and pass them in as you quote them outside

import { Message, MessageBox } from 'element-ui'

export confirmBox(title,tips,type,success,error){
     MessageBox.confirm(tips, title, {
        confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: type
      }).then(() = > {
        Message({
          showClose: true.type: 'success'.message: success
       })
    }).catch((response) = > {
        Message({
          showClose: true.type: 'info'.message: error
       })
    })
}
export default {
  confirmBox
}
Copy the code

3. There is a question: when will the Message of Success be called after the popbox clicks ok? The Message of Success is called only after the API call is successful.

So I have passed in the API methods and parameters, I don't know what side effects this will have or bad writing, hope more comments!!

import { Message, MessageBox } from 'element-ui'

export confirmBox(title,tips,type,success,error,fun,data,over){
     MessageBox.confirm(tips, title, {
        confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: type
      }).then(() = > {
      / / call API
      fun(data).then({
        Message({
          showClose: true.type: 'success'.message: success
        })
        // over: a method to refresh page data, jump, etc., after an API call
        over()
      })
    }).catch((response) = > {
        Message({
          showClose: true.type: 'info'.message: error
       })
    })
}
export default {
  confirmBox
}
Copy the code

4. It can continue to be reconstructed according to different needs

import { Message, MessageBox } from 'element-ui'

export confirmBox(title,tips,type,success,error,fun,data,over){
     MessageBox.confirm(tips, title, {
        confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: type
      }).then(() = > {
      / / call API
      fun(data).then({
        Message({
          showClose: true.type: 'success'.message: success
        })
        // over: a method to refresh page data, jump, etc., after an API call
        over()
      }).catch(res= >{   // Catch and finish are added according to individual requirements
      }).finish(res= >{})
    }).catch((response) = > {
        Message({
          showClose: true.type: 'info'.message: error
       })
    })
}
export default {
  confirmBox
}
Copy the code

Conclusion: welcome everybody big guy to comment on, correct my mistake.