美文网首页
VUE3（二十四）自定义alert弹窗组件

VUE3（二十四）自定义alert弹窗组件

作者: camellias__ | 来源:发表于2021-04-22 09:26 被阅读0次

我这里自定义了几个alert弹窗组件：

1：带有确定取消的alert弹窗组件：效果如下图所示

1.png

代码：

/**
 * 自定义公共函数
 */
const utils = 
{
/**
     * @name: 自定义alert(确定，取消)
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @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: guanchao_gc@qq.com
     * @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），效果如下图所示：

2.gif

代码：

/**
 * 自定义公共函数
 */
const utils = 
{
/**
     * @name: 自定义alert，在自定义时间消失
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @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: guanchao_gc@qq.com
     * @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消失。就是这样一个小功能。

效果如下图所示：

3.gif 4.gif

我这里定义了一个全局变量，来存储loading的dom节点。

/**
 * 自定义公共函数
 */
const utils = 
{ 
/**
     * @name: 下方自定义loading使用节点
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @date: 2021-02-22 21:28:32
     */
    element : '', 
    /**
     * @name: 执行显示loading（提示词）
     * @author: camellia
     * @email: guanchao_gc@qq.com
     * @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: guanchao_gc@qq.com
     * @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: guanchao_gc@qq.com
     * @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

相关文章

网友评论

      本文标题：VUE3（二十四）自定义alert弹窗组件

      本文链接：https://www.haomeiwen.com/subject/zerxrltx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|VUE3（二十四）自定义alert弹窗组件|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！