preface

Recently, the company is busy with the project, so there is no time to update the previous sorting, and we will continue later when we are free.

As mentioned in the question, you must have carried out secondary encapsulation for MessageBox in your daily projects. If you have any good encapsulation methods and suggestions, please leave a message to give Meng a new opportunity to learn.

A prelude to

Here’s how the story started:

Today I want to re-wrap elementUI’s MessageBox, because it’s a pain to have to write a bunch of code every time.

Open!!

The body of the

Here we only encapsulate the most basic content, including title, message, prompt type and callback, and catch does nothing

A separate reference

All the following cases refer to MessageBox separately,

import { MessageBox } from "element-ui";
Copy the code

The original code

    MessageBox.confirm('This operation will permanently delete the file. Do you want to continue? '.'tip', {
        confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: 'warning'
    }).then((a)= > {
        console.log('This is a callback.')})Copy the code

Normal version

As we all know, confirm uses promises to handle subsequent responses.

So MessageBox. Confirm is a Promise object, and the easiest thing to do is simply return the confirm method:

export function MessageConfirm2({ 
    content: content = "Confirm operation?", 
    tip: tip = "Tip", 
    type: type = "warning" 
} = { content: "Confirm operation?", tip: "Tip", type: "warning" }) {
    return MessageBox.confirm(content, tip, {
        confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: type,
    })
}
Copy the code

Words used:

/ / introduction
import { MessageConfirm } from "@/utils/confirm"
MessageConfirm().then(res= > {
	console.log('Yeah, that's right. I'll just write the callback here.')})Copy the code

The undoubted result:

Personal magic revision

When I was wrapping code, I realized that I had written a handwritten version of a Promise (I don’t know why it came to me, even though it was poorly written). Could I wrap MessageBox like a Promise? What?

const promise = new Promise((resolve,reject) = >{
    // ...
    resolve(true);
    // ...
    reject(false);
})
Copy the code

Fake it if you want to.

export class MessageTips {
    constructor(fn) {
        this.status = 'pending';
        this.confirmFn = [];
        this.alertFn = [];
        this.promotFn = [];
        const confirm = ({ content: content = "Confirm operation?", tip: tip = "Tip", type: type = "warning" } = { content: "Confirm operation?", tip: "Tip", type: "warning" }) = > {
            if(this.status == 'pending') {this.content = content;
                this.tip = tip;
                this.type = type;
                this.status = 'confirm';
                this.confirmFn.forEach(item= >{ item(); }}})const alert = ({ content: content = "Confirm operation?", tip: tip = "Tip", type: type = "warning" } = { content: "Confirm operation?", tip: "Tip", type: "warning" }) = > {
            if(this.status == 'pending') {this.content = content;
                this.tip = tip;
                this.type = type;
                this.status = 'alert';
                this.alertFn.forEach(item= >{ item(); }}})const promot = ({ content: content = "Confirm operation?", tip: tip = "Tip", type: type = "warning" } = { content: "Confirm operation?", tip: "Tip", type: "warning" }) = > {
            if(this.status == 'pending') {this.content = content;
                this.tip = tip;
                this.type = type;
                this.status = 'promot';
                this.promotFn.forEach(item= > {
                    item();
                })
            }
        }
        fn({confirm,alert,promot})
    }
    
    confirm(callback) {
        MessageBox.confirm(this.content, this.tip, {
            confirmButtonText: "Sure".cancelButtonText: "Cancel".type: this.type
        }).then((a)= > {
            callback();
        })
    }
    alert(callback) {
        MessageBox.alert(this.content, this.tip, {
            confirmButtonText: "Sure".type: this.type,
            callback: (a)= >{ callback(); }}); } promot(callback) { MessageBox.prompt(this.content, this.tip, {
            confirmButtonText: 'sure'.cancelButtonText: 'cancel'.type: this.type
        }).then(({ value = 'Notice that promot has a callback value.' } = {value: 'Notice that promot has a callback value.'}) = > {
            callback(value)
        })
    }
    then(callback){
        if(this.status === 'pending') {this.confirmFn.push(callback);
            this.alertFn.push(callback);
            this.promotFn.push(callback);
        }
        if(this.status === 'confirm') {this.confirm(callback)
        }
        if(this.status === 'alert') {this.alert(callback)
        }
        if(this.status === 'promot') {this.promot(callback)
        }
    }
}

Copy the code

1. First, the constructor defines the prompt to display and gives it a default value (after all, lazy, new does not want to pass arguments).

2. Then, instead of looking at the three methods, look at the then method first and enter different confirmation prompt boxes according to the status value

3. Why define three empty arrays? For the possibility of a timer, see an article I wrote earlier:

   Writing a very simple asynchronous programming solution Promise and its chained calls is relatively simple to write, but the basics are explained.

Finally, look at the usage. Here I registered the class to the Vue prototype:

confirm

alert

promot

conclusion

Well, in fact, it was not written like this at the beginning, the idea was wrong at the beginning, and finally it was written wrong, and then cut half and write again, and then unknowingly made more than two hours to come up with this version.

Because the original Messagebox has used promise, and encapsulated a similar one, I do not know whether it is too cumbersome, but it is good to have less coupling, if there is any incorrect, I hope you correct.

Mom, it’s half past one, go to bed!!