VUE3（二十四）自定義alert彈窗組件

我這里自定義了幾個alert彈窗組件：

1：帶有確定取消的alert彈窗組件：效果如下圖所示

代碼：

/**
 * 自定義公共函數
 */
const utils = 
{
/**
     * @name: 自定義alert(確定，取消)
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-23 
     * @param:  data    string  顯示的文字
     * @param:  callbackTure    function    點擊確定回調函數
     * @param:  callbackFalse   function    點擊取消回調函數
     */
    alert(data: any, callbackTure: any = '', callbackFalse:any = '') 
    { 
        var alert_bg = document.createElement('div');
        var alert_box = document.createElement('div');
        var alert_text = document.createElement('div');
        var alert_btn_true = document.createElement('div');
        var alert_btn_false = document.createElement('div');
        var textNode = document.createTextNode(data ? data : '')
        var btnText_false = document.createTextNode('取 消');
        var btnText_true = document.createTextNode('確 定');
        // 控制背景樣式
        utils.setCss(alert_bg, {
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0',
            'bottom': '0',
            'background-color': 'rgba(0, 0, 0, 0.1)',
            'z-index': '999999999'
        });
        // 控制 提示框樣式
        utils.setCss(alert_box, {
            'width': '350px',
            'max-width': '90%',
            'font-size': '18px',
            'text-align': 'center',
            'background-color': '#fff',
            'border-radius': '15px',
            'position': 'absolute',
            'top': '40%',
            'left': '50%',
            'transform': 'translate(-50%, -50%)'
        });
        // 控制提示字體樣式
        utils.setCss(alert_text, {
            'padding': '32px 15px',
            'border-bottom': '1px solid #ddd'
        });
        // 控制確定按鈕樣式
        utils.setCss(alert_btn_true, {
            'padding': '10px 0',
            'color': '#007aff',
            'font-weight': '600',
            'cursor': 'pointer',
            'float':'right',
            'text-align': 'center',
            'width': '49%',
        });
        // 控制取消按鈕樣式
        utils.setCss(alert_btn_false, {
            'padding': '10px 0',
            'color': '#007aff',
            'font-weight': '600',
            'cursor': 'pointer',
            'float': 'right',
            'text-align': 'center',
            'width': '50%',
            'border-right': '1px solid #CCC',
        });
        // 內部結構套入
        alert_text.appendChild(textNode);
        alert_btn_true.appendChild(btnText_true);
        alert_btn_false.appendChild(btnText_false);
        alert_box.appendChild(alert_text);
        alert_box.appendChild(alert_btn_true);
        alert_box.appendChild(alert_btn_false);
        alert_bg.appendChild(alert_box);
        // 整體顯示到頁面內
        document.getElementsByTagName('body')[0].appendChild(alert_bg);
        // 確定按鈕綁定點擊事件
        alert_btn_true.onclick = function () {
            // alert_bg.parentNode.removeChild(alert_bg);
            if (typeof callbackTure === 'function') 
            {
                callbackTure(); //回調
            }
            utils.setCss(alert_bg, {
                'display': 'none'
            });
        }
        // 取消按鈕綁定點擊事件
        alert_btn_false.onclick = function () {
            if (typeof callbackFalse === 'function') 
            {
                callbackFalse(); //回調
            }
            else if (typeof callbackTure === 'function')
            {
                callbackTure(); //回調
            }
            utils.setCss(alert_bg, {
                'display': 'none'
            });
        }
},
    /**
     * @name: 自定義alert添加css
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-23 
     */
    setCss(targetObj:any, cssObj:any) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
        for (var i in cssObj) 
        {
            str += i + ':' + cssObj[i] + ';';
        }
        targetObj.style.cssText = str;
    },
}
 

調用示例：

utils
.
alertLoadExec
(
false
);
 

2：自定義alert，在自定義時間消失（仿layer），效果如下圖所示：

代碼：

/**
 * 自定義公共函數
 */
const utils = 
{
/**
     * @name: 自定義alert，在自定義時間消失
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-23 
     * @param:  data    string  顯示的文字
     * @param:  callbackTure    function    點擊確定回調函數
     * @param:  time    number  顯示時間
     */
    alertMsg(time: number, data: any = '',  callbackTure: any = '') {
        var alert_bg = document.createElement('div');
        var alert_box = document.createElement('div');
        var alert_text = document.createElement('div');
        var textNode = document.createTextNode(data ? data : '')
        // 控制背景樣式
        utils.setCss(alert_bg, {
            'position': 'fixed',
            'top': '0',
            'left': '0',
            'right': '0',
            'bottom': '0',
            'z-index': '999999999'
        });
        // 控制 提示框樣式
        utils.setCss(alert_box, {
            'width': '100%',
            'max-width': '90%',
            'font-size': '18px',
            'text-align': 'center',
            'border-radius': '15px',
            'position': 'absolute',
            'top': '40%',
            'left': '50%',
            'transform': 'translate(-50%, -50%)'
        });
        if (data)
        {
            // 控制提示字體樣式
            utils.setCss(alert_text, {
                'width': '350px',
                'border-bottom': '1px solid #ddd',
                'padding': '16px 10px',
                'color': 'white',
                'background-color': 'rgba(0, 0, 0, 0.7)',
                'opacity': 1,
                'border-radius': '4px',
                'margin': 'auto',
            });
        }
        else
        {
            // 控制load圖片顯示樣式
            utils.setCss(alert_text, {
                'width': '100px',
                'height':'100px',
                'background':' url("/src/assets/img/loading-0.gif") no-repeat center',
                'margin':'auto'
            });
        }
        
        // 內部結構套入
        alert_text.appendChild(textNode);
        alert_box.appendChild(alert_text);
        alert_bg.appendChild(alert_box);
        // 整體顯示到頁面內
        document.getElementsByTagName('body')[0].appendChild(alert_bg);
 
        setTimeout(function () {
            if (typeof callbackTure === 'function') {
                callbackTure(); //回調
            }
            // 彈窗消失~
            utils.setCss(alert_bg, {
                'display': 'none'
            });
        }, time);
},
    /**
     * @name: 自定義alert添加css
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-23 
     */
    setCss(targetObj:any, cssObj:any) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
        for (var i in cssObj) 
        {
            str += i + ':' + cssObj[i] + ';';
        }
        targetObj.style.cssText = str;
    },
}

調用實例：

utils
.
alertMsg
(
2000
, 
'
發送消息不能為空！
'
);

3：自定義loading，在需要讓他消失的時候讓其消失 。

這個函數功能稍微有一丟丟復雜，我這里大概說一下，大概就是，在發送請求前顯示loading，服務器返回數據之后，loading消失。就是這樣一個小功能。

效果如下圖所示：

我這里定義了一個全局變量，來存儲loading的dom節點。

/**
 * 自定義公共函數
 */
const utils = 
{ 
/**
     * @name: 下方自定義loading使用節點
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-02-22 21:28:32
     */
    element : '', 
    /**
     * @name: 執行顯示loading（提示詞）
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-02-22 21:32:27
     * @param:  sign    boolean true:顯示，false：刪除
     * @param:  msg string  提示詞
     */
    alertLoadExec(sign:any,msg:any='')
    {
        if(sign)
        {
            utils.element = utils.alertLoading(true, msg);
        }
        else
        {
            if (utils.element)
            {
                utils.alertLoading(utils.element);
            }
        }
    },
    /**
     * @name: 自定義loading，true/false
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-23 
     * @param:  sign    boolean true:顯示，false：刪除
     * @param:  msg string  提示詞
     */
    alertLoading(sign:any,msg:any='') 
    {
        if (sign === true)
        {
            var alert_bg = document.createElement('div');
            var alert_box = document.createElement('div');
            var alert_text = document.createElement('div');
            var textNode = document.createTextNode(msg ? msg : '')
            // 控制背景樣式
            utils.setCss(alert_bg, {
                'position': 'fixed',
                'top': '0',
                'left': '0',
                'right': '0',
                'bottom': '0',
                'z-index': '999999999'
            });
            // 控制 提示框樣式
            utils.setCss(alert_box, {
                'width': '100%',
                'max-width': '90%',
                'font-size': '18px',
                'text-align': 'center',
                'border-radius': '15px',
                'position': 'absolute',
                'top': '40%',
                'left': '50%',
                'transform': 'translate(-50%, -50%)'
            });
            if (msg) 
            {
                // 控制提示字體樣式
                utils.setCss(alert_text, {
                    'width': '350px',
                    'border-bottom': '1px solid #ddd',
                    'padding': '16px 10px',
                    'color': 'white',
                    'background-color': 'rgba(0, 0, 0, 0.7)',
                    'opacity': 1,
                    'border-radius': '4px',
                    'margin': 'auto',
                });
            }
            else 
            {
                // 控制load圖片顯示樣式
                utils.setCss(alert_text, {
                    'width': '100px',
                    'height': '100px',
                    'background': ' url("/src/assets/img/loading-0.gif") no-repeat center',
                    'margin': 'auto'
                });
            }
            // 內部結構套入
            alert_text.appendChild(textNode);
            alert_box.appendChild(alert_text);
            alert_bg.appendChild(alert_box);
            // 整體顯示到頁面內
            document.getElementsByTagName('body')[0].appendChild(alert_bg);
            return alert_bg;
        }
        else
        {
            // for(var i = 0; i< sign.length;i++)
            // {
            // var _parentElement = sign[i].parentNode;
            var _parentElement = sign.parentNode;
            if (_parentElement) {
                _parentElement.removeChild(sign);
            }
            // }
        }
    },
    /**
     * @name: 自定義alert添加css
     * @author: camellia
     * @email: [e-mail]
     * @date: 2021-01-23 
     */
    setCss(targetObj:any, cssObj:any) {
        var str = targetObj.getAttribute("style") ? targetObj.getAttribute('style') : '';
        for (var i in cssObj) 
        {
            str += i + ':' + cssObj[i] + ';';
        }
        targetObj.style.cssText = str;
},
}

調用實例：

// 開啟自定義loading
            utils.alertLoadExec(true);
// 關閉自定義loading
            utils.alertLoadExec(false);

以上就是我自定義的幾個alert顯示樣式，

都是根據需求自己想的招，大概都是野路子。

有好的建議，請在下方輸入你的評論。

歡迎訪問個人博客
https://guanchao.site

歡迎訪問小程序：