md/js/quickDom.js

/*
 * @Description: 构建弹窗
 * @Autor: kindring
 * @Date: 2021-10-12 17:16:30
 * @LastEditors: kindring
 * @LastEditTime: 2021-11-15 10:37:16
 * @LastDescript: 
 */

class CustomPop {
    constructor(option) {

        let defaultOption = {
                type: 'tip', //tip,custom,loading,text居中文本
                mask: false,
                centerDoms: null, //中间的所有dom元素,用于自定义提示,数组模式,字符串
                text: null,
            }
            // 小窗口弹窗,则默认只允许设置为body
        this.el = option.el || window.document.body;
        this.maskEl = null;
        this.parentEl = null;
        this.type = option.type || defaultOption.type;
        this.mask = option.mask;
        this.tipNum = 0;
        this.tipStep = 40;
        this.centerDoms = option.centerDoms

        if (this.type == 'tip') {
            this.el == window.document.body;
        } else if (this.type == 'custom') {
            // if(window.document.body)
            // this.maskEl = this.buildMask();
            this.create();
        }

        if (option.autoClose) {
            this.parentEl.addEventListener('click', (e) => {
                this.hide()
            })
        }

        this.option = option;
        this.nowCustomKey = null;
        this.bind();
    }

    // 绑定操作,将dom元素绑定到指定的dom元素中,指定dom元素自动添加 relative
    bind() {
            // console.log(this.el.style.position);
            if (!this.el.style.position) {
                this.el.style.position = 'relative'
            }
        }
        // 创建自定义的dom元素
    create() {
        let parentDom = document.createElement('div');
        // 设置dom元素样式
        this.setStyle(parentDom, {
            display: 'none',
            position: 'absolute',
            left: 0,
            top: 0,
            width: '100%',
            height: '100%',
            'justify-center': 'center',
            'alignItems': 'center'
        });
        if (this.mask) {
            let maskEl = document.createElement('div');
            this.setStyle(maskEl, {
                position: 'absolute',
                left: 0,
                top: 0,
                width: '100%',
                height: '100%',
                backgroundColor: 'rgba(0,0,0)',
                opacity: '0.3'
            })
            this.maskEl = maskEl;
            parentDom.appendChild(maskEl);
        }
        if (this.centerDoms) {
            this.centerDoms.forEach(item => {
                item.el.parentElement.removeChild(item.el)
            })
        }
        this.parentEl = parentDom;
        // 添加元素至dom元素中
        this.el.appendChild(parentDom);
    }

    // 显示界面,优先匹配中间内容
    show(text, theme) {
        // console.log(this.type);
        if (this.type == 'tip') {
            let _time = this.tipNum;
            _time = Math.min(10, _time);
            // 设置dom延时进行弹窗提示
            setTimeout(() => {
                // console.log(this.type);
                // 构建tip
                let tipDom = this.buildTip(theme);
                tipDom.innerHTML = text;
                //自动添加到body中去
                this.el.appendChild(tipDom);
                // 自动显示dom元素并且隐藏
                setTimeout(() => {
                    this.setStyle(tipDom, {
                        opacity: '1'
                    })
                    setTimeout(() => {

                        this.setStyle(tipDom, {
                            top: `${50+(_time * this.tipStep)}px`
                        })
                    }, 100);
                    setTimeout(() => {
                        this.setStyle(tipDom, {
                            opacity: 0,
                            top: `${200+(_time * this.tipStep)}px`
                        })
                        setTimeout(() => {
                            this.setStyle(tipDom, {
                                display: 'none',
                            })
                            this.tipNum--;

                            this.el.removeChild(tipDom);
                        }, 900);
                    }, 2200);
                }, 1);
            }, this.tipNum * this.tipStep);
            this.tipNum++;
            return;
        } else if (this.type == 'custom') {
            let centerDom = null;
            if (text) {
                let doms;
                if (this.centerDoms) {
                    doms = this.centerDoms.find(item => {
                        if (item.key == text) {
                            return item;
                        }
                    })
                }
                if (!doms) {
                    doms = {
                        el: document.createElement('span'),
                        key: 'null'
                    }
                    doms.el.innerHTML = text;
                }
                centerDom = doms;
            } else if (this.option.centerDoms) {
                //默认选择第一个dom元素
                centerDom = this.option.centerDoms[0];
            } else {
                //如果没有字符串,并且也没有默认节点,则无视此窗口
                console.error('错误');
            }

            if (centerDom) {
                if (this.nowCustomKey == text) {
                    // 直接显示dom元素
                } else {
                    // 修改dom元素
                    this.parentEl.innerHTML = '';
                    if (this.mask) {
                        this.parentEl.appendChild(this.maskEl)
                    }
                    centerDom.el.addEventListener('click', function(e) {
                        e = e || window.event;
                        e.preventDefault();
                    });

                    // 重新构建
                    this.parentEl.appendChild(centerDom.el)
                }
            }
            this.nowCustomKey = text;
            this.setStyle(this.parentEl, {
                display: 'flex'
            })
        }
    };


    // hide隐藏界面
    hide() {
        if (this.type == 'custom') {
            this.setStyle(this.parentEl, {
                display: 'none'
            });
        } else {
            console.error('其他类型的元素正在制作中');
        }
    }





    buildMask() {

        return maskEl
    }

    /**
     * 构建提示元素
     * @param {'info'|'success'|'warn'|'error'} _theme 样式主题,
     */
    buildTip(_theme) {
        let el = document.createElement('div');
        _theme = _theme || 'default';
        this.setStyle(el, {
            'transition': 'all 0.5s',
            position: 'absolute',
            top: '555px',
            left: '50%',
            transform: 'translate(-50%,0)',
            display: 'block',
            padding: '5px 25px',
            'border-radius': '5px',
            opacity: 0,
        })
        if (_theme == 'error' || _theme == 'err') {
            this.setStyle(el, {
                color: '#D8000C',
                backgroundColor: '#FFBABA',
                border: '1px solid rgb(219 176 176)'
            })
        } else if (_theme == 'success' || _theme == 'ok') {
            this.setStyle(el, {
                color: '#4F8A10',
                backgroundColor: '#DFF2BF',
                border: '1px solid rgb(227 253 182)'
            })
        } else if (_theme == 'warn' || _theme == 'warning' || _theme == 'waring') {
            this.setStyle(el, {
                color: '#9F6000',
                backgroundColor: '#FEEFB3',
                border: '1px solid rgb(241 229 180)'
            })
        } else {
            this.setStyle(el, {
                color: '#31708f',
                backgroundColor: '#d9edf7',
                border: '1px solid #bce8f1'
            })
        }
        return el;
    }

    // 辅助函数,设置dom元素的样式
    setStyle(el, params) {
        Object.keys(params).forEach(key => {
            let strArr = key.split('-');
            let strKey = key;
            if (strArr.length >= 2) {
                strKey = strArr.reduce((acc, current, index) => {
                    // console.log();
                    // 第一位
                    return index == 0 ? current : acc + (current.replace(current[0], current[0].toUpperCase()))
                }, '')
            } else {
                strKey = strArr[0]
            }
            el.style[strKey] = params[key];
        })
        return el;
    }


    // 确认的函数
    onOk() {

    }

    // 取消弹窗的函数
    onCancel() {

    }
}