简易Dialog封装

230 阅读1分钟

根据dialog要求,需要给markDialog、box标签写下样式!!!

使用方法
// Dialog.show('提示内容',{
//     //配置信息
//     isTap:true, //是否支持点击空白出让弹出层消失
//     isAuto:2000,//是否支持自动消失,不支持传递0
//     callBack:function () {/回调函数:提示消失的时候处理什么事情
//         
//     }
// });

/*DIALOG*/
~function(){
    class Dialog{
        constructor(con='',{
            isTap=true,
            isAuto=2000,
            callBack=new Function()
        }={}){
            //把需要使用的挂载到实例上
            this.con=con;
            this.isTap=isTap;  //是否点击
            this.isAuto=isAuto;
            this.callBack=callBack;
            //创建提示层
            this.init();
        }
        init(){
            //1.创建一个弹出层结构
            this.createMark();

            //控制消失 自动消失
            if(this.isAuto!==0){
                this.autoTimer=setTimeout(()=>{
                    this.removeMark();
                    clearInterval(this.autoTimer);
                },this.isAuto);
            }
            //点击空白消失
            if(this.isTap){
                $('.markDialog').tap(e=>{
                   let target= e.target,
                       $target=$(target),
                        $par=$target.parent();
                        if($par.hasOwnProperty('box')) return;
                        this.removeMark();
                        clearInterval(this.autoTimer);
                })

            }

        }

        createMark(){
            let sectionBox=document.createElement('section');
                sectionBox.className='markDialog';
                sectionBox.innerHTML+=`<div class="box">
            <h3>系统提示</h3>
            <div class="content">${this.con}</div>
        </div>`;

            let container=document.querySelector('.mainBox')||document.body;
            container.appendChild(sectionBox);

            //把容器和创建的盒子挂载到实例上
            this.container=container;
            this.sectionBox=sectionBox;
        }

        removeMark(){
            if(!this.sectionBox||!this.container){
                return;
            }
            this.container.removeChild(this.sectionBox);
            this.sectionBox=null;
            this.callBack(this);
        }
        static show(...arg){
          return  new Dialog(...arg);
        
    }
    window.Dialog=Dialog;
}();