es6 实现dialog组件的封装

其他 2019-08-26 08:21:27 阅读次数: 0 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .k-dialog {
            width: 30%;
            z-index: 2001;
            display: block;
            position: absolute;
            background: #fff;
            border-radius: 2px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
            margin: 0 auto;
            top: 15vh;
            left: 30%;
            display: none;
        }

        .k-wrapper {
            position: fixed;
            left: 0px;
            top: 0px;
            bottom: 0px;
            right: 0px;
            background: black;
            opacity: 0.4;
            z-index: 2000;
            display: none;
        }

        .k-header {
            padding: 20px 20px 10px;
        }

        .k-header .k-title {
            line-height: 24px;
            font-size: 18px;
            color: #303133;
            float: left;
        }

        .k-body {
            padding: 30px 20px;
            color: #606266;
            font-size: 14px;
        }

        .k-footer {
            padding: 10px 20px 30px;
            text-align: right;
        }

        .k-close {
            color: #909399;
            font-weight: 400;
            float: right;
            cursor: pointer;
        }

        .k-default {
            color: #606266;
            border: 1px solid #dcdfe6;
            text-align: center;
            cursor: pointer;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: 500;
            margin-right: 10px;
        }

        .k-default:hover {
            color: #409eff;
            background: #ecf5ff;
            border-color: #c6e2ff;
        }

        .k-primary {
            border: 1px solid #dcdfe6;
            text-align: center;
            cursor: pointer;
            padding: 12px 20px;
            font-size: 14px;
            border-radius: 4px;
            font-weight: 500;
            background: #409eff;
            color: #fff;
            margin-left: 10px;
        }

        .k-primary:hover {
            background: #66b1ff;
        }

        .k-input {
            width: 100%;
            margin-left: 20px;
            margin-bottom: 20px;
        }

        .input-inner {
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #606266;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: none;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
            width: 100%;
            margin-top: 20px;
        }
    </style>
</head>

<body>

    <button class="showDailog">点击</button>
    <button class="extendsDailog">点击</button>
</body>
<script>             
    class Dailog extends EventTarget{
        constructor(options) {
            //Object.assign讲两个对象的属性方法合并后放回新的对象 后者和前者的属性名或方法名相同这后者覆盖前者
            let newOpt = Object.assign({
                width: "30%",
                height: "250px",
                title: "测试标题",
                content: "测试内容",
                dragable: true, //是否可拖拽
                maskable: true, //是否有遮罩
                isCancel: false, //是否有取消
                confim() {
                    console.log("默认配置点击了确定");
                },
                cancel() {
                    console.log("默认配置点击了取消");
                }
            }, options);
            
       
            this.opts = newOpt;
            this.init();
        }
        // 组件的初始化方法；
        init() {
            this.renderView();
            if (this.opts.dragable) {
                this.drag();
            }
            //自定义取消事件
            let cancel = new Event("cancel");
       
            this.addEventListener("cancel",this.opts.cancel);
            this.addEventListener("confim",this.opts.confim);
            // 事件委托；
            this.dailogEle.querySelector(".k-dialog").addEventListener("click", e => {
            
                switch (e.target.className) {
                    case "k-close":
                        this.dispatchEvent(cancel);
                        this.close();
                        break;
                    case "k-default":          
                        this.dispatchEvent(cancel);
                        this.close();
                        break;
                    case "k-primary":
                        this.ensure();
                        break;
                }
            })
        }
        ensure(inputValue){
            this.dispatchEvent(new CustomEvent("confim",{
                detail:{
                    inputValue
                }
            }));
            this.close();
        }
        drag() {
            let dialog = this.dailogEle.querySelector(".k-dialog");
            dialog.onmousedown = function (e) {
                let ev = e || window.event;
                let x = ev.clientX - dialog.offsetLeft;
                let y = ev.clientY - dialog.offsetTop;
                dialog.onmousemove = function (e) {
                    let ev = e || window.event;
                    let xx = ev.clientX;
                    let yy = ev.clientY;
                    dialog.style.left = xx - x + "px";
                    dialog.style.top = yy - y + "px";
                    return false;
                }
                document.onmouseup = function () {
                    dialog.onmousemove = "";
                }
            }
        }
        // 让弹框显示；
        open() {
            if (this.opts.maskable) {
                this.dailogEle.querySelector(".k-wrapper").style.display = "block";
            }
            this.dailogEle.querySelector(".k-dialog").style.display = "block";
        }
        close() {
            if (this.opts.maskable) {
                this.dailogEle.querySelector(".k-wrapper").style.display = "none";
            }
            this.dailogEle.querySelector(".k-dialog").style.display = "none";
        }
        // 生成dom结构
        renderView() {
            let dailogEle = document.createElement("div");
            dailogEle.innerHTML = `<div class="k-wrapper"></div>
                                     <div class="k-dialog" style="width:${this.opts.width};height:${this.opts.height}">
                                        <div class="k-header">
                                            <span class="k-title">${this.opts.title}</span><span class="k-close">X</span>
                                        </div>
                                        <div class="k-body">
                                            <span>${this.opts.content}</span>
                                        </div>
                                        <div class="k-footer">
                                           ${this.opts.isCancel ? '<span class="k-default">取消</span>' : ''} 
                                            <span class="k-primary">确定</span>
                                        </div>
                                    </div>`;
            document.querySelector("body").appendChild(dailogEle);
            this.dailogEle = dailogEle;
         
        }
    }
    //弹窗输入宽组件集成Dailog
    class ExtendsDailog extends Dailog{
        constructor(options){
            super(options);
            this.renderInput();
        }
        renderInput(){
            let myInput = document.createElement("input");
            myInput.classList.add("input-inner");
            myInput.type = "text";
            this.dailogEle.querySelector(".k-body").appendChild(myInput);
        }
        ensure(){
            let inputValue =  this.dailogEle.querySelector(".input-inner").value;
            super.ensure(inputValue);

        }
       
    }



    // 使用
    let d1 = new Dailog({
        width: "40%",
        height: "250px",
        title: "配置标题",
        content: "配置内容",
        dragable: true, //是否可拖拽
        maskable: true, //是否有遮罩
        isCancel: true, //是否有取消
        confim: function () {
            console.log("点击了确定");
            
        },
        cancel() {
            console.log("点击了取消");
            
        }

    })

    document.querySelector(".showDailog").onclick = function () {
        d1.open();
    }


    let d2 = new ExtendsDailog({
        width: "40%",
        height: "250px",
        title: "配置标题",
  
        dragable: true, //是否可拖拽
        maskable: true, //是否有遮罩
        isCancel: true, //是否有取消
        confim: function (e) {
            console.log("点击了确定",e.detail.inputValue);
        },
        cancel() {
            console.log("点击了取消");
        }

    })

    document.querySelector(".extendsDailog").onclick = function () {
        d2.open();
    }


</script>

</html>
<! DOCTYPE html >
< html lang= "en" >

< head >
< meta charset= "UTF-8" >
< meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
< meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
< title >Document </ title >
< style >
.k-dialog {
width: 30%;
z-index: 2001;
display: block;
position: absolute;
background: #fff;
border-radius: 2px;
box-shadow: 0 1px 3px rgba( 0, 0, 0, .3);
margin: 0 auto;
top: 15vh;
left: 30%;
display: none;
}

.k-wrapper {
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: black;
opacity: 0.4;
z-index: 2000;
display: none;
}

.k-header {
padding: 20px 20px 10px;
}

.k-header .k-title {
line-height: 24px;
font-size: 18px;
color: #303133;
float: left;
}

.k-body {
padding: 30px 20px;
color: #606266;
font-size: 14px;
}

.k-footer {
padding: 10px 20px 30px;
text-align: right;
}

.k-close {
color: #909399;
font-weight: 400;
float: right;
cursor: pointer;
}

.k-default {
color: #606266;
border: 1px solid #dcdfe6;
text-align: center;
cursor: pointer;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
font-weight: 500;
margin-right: 10px;
}

.k-default:hover {
color: #409eff;
background: #ecf5ff;
border-color: #c6e2ff;
}

.k-primary {
border: 1px solid #dcdfe6;
text-align: center;
cursor: pointer;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
font-weight: 500;
background: #409eff;
color: #fff;
margin-left: 10px;
}

.k-primary:hover {
background: #66b1ff;
}

.k-input {
width: 100%;
margin-left: 20px;
margin-bottom: 20px;
}

.input-inner {
-webkit-appearance: none;
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 40px;
line-height: 40px;
outline: none;
padding: 0 15px;
transition: border-color .2s cubic-bezier( .645, .045, .355, 1);
width: 100%;
margin-top: 20px;
}
< / style >
</ head >

< body >

< button class= "showDailog" >点击 </ button >
< button class= "extendsDailog" >点击 </ button >
</ body >
< script >
class Dailog extends EventTarget{
constructor( options) {
 
let newOpt = Object. assign({
width: "30%",
height: "250px",
title: "测试标题",
content: "测试内容",
dragable: true, //是否可拖拽
maskable: true, //是否有遮罩
isCancel: false, //是否有取消
confim() {
console. log( "默认配置点击了确定");
},
cancel() {
console. log( "默认配置点击了取消");
}
}, options);
 
 
this. opts = newOpt;
this. init();
}
// 组件的初始化方法；
init() {
this. renderView();
if ( this. opts. dragable) {
this. drag();
}
 
let cancel = new Event( "cancel");
 
this. addEventListener( "cancel", this. opts. cancel);
this. addEventListener( "confim", this. opts. confim);
// 事件委托；
this. dailogEle. querySelector( ".k-dialog"). addEventListener( "click", e => {
 
switch ( e. target. className) {
case "k-close":
this. dispatchEvent( cancel);
this. close();
break;
case "k-default":
this. dispatchEvent( cancel);
this. close();
break;
case "k-primary":
this. ensure();
break;
}
})
}
ensure( inputValue){
this. dispatchEvent( new CustomEvent( "confim",{
detail:{
inputValue
}
}));
this. close();
}
drag() {
let dialog = this. dailogEle. querySelector( ".k-dialog");
dialog. onmousedown = function ( e) {
let ev = e || window. event;
let x = ev. clientX - dialog. offsetLeft;
let y = ev. clientY - dialog. offsetTop;
dialog. onmousemove = function ( e) {
let ev = e || window. event;
let xx = ev. clientX;
let yy = ev. clientY;
dialog. style. left = xx - x + "px";
dialog. style. top = yy - y + "px";
return false;
}
document. onmouseup = function () {
dialog. onmousemove = "";
}
}
}
// 让弹框显示；
open() {
if ( this. opts. maskable) {
this. dailogEle. querySelector( ".k-wrapper"). style. display = "block";
}
this. dailogEle. querySelector( ".k-dialog"). style. display = "block";
}
close() {
if ( this. opts. maskable) {
this. dailogEle. querySelector( ".k-wrapper"). style. display = "none";
}
this. dailogEle. querySelector( ".k-dialog"). style. display = "none";
}
// 生成dom结构
renderView() {
let dailogEle = document. createElement( "div");
dailogEle. innerHTML = `<div class="k-wrapper"></div>
<div class="k-dialog" style="width: ${ this. opts. width } ;height: ${ this. opts. height } ">
<div class="k-header">
<span class="k-title"> ${ this. opts. title } </span><span class="k-close">X</span>
</div>
<div class="k-body">
<span> ${ this. opts. content } </span>
</div>
<div class="k-footer">
${ this. opts. isCancel ? '<span class="k-default">取消</span>' : '' }
<span class="k-primary">确定</span>
</div>
</div>`;
document. querySelector( "body"). appendChild( dailogEle);
this. dailogEle = dailogEle;
 
}
}

class ExtendsDailog extends Dailog{
constructor( options){
super( options);
this. renderInput();
}
renderInput(){
let myInput = document. createElement( "input");
myInput. classList. add( "input-inner");
myInput. type = "text";
this. dailogEle. querySelector( ".k-body"). appendChild( myInput);
}
ensure(){
let inputValue = this. dailogEle. querySelector( ".input-inner"). value;
super. ensure( inputValue);

}
 
}



// 使用
let d1 = new Dailog({
width: "40%",
height: "250px",
title: "配置标题",
content: "配置内容",
dragable: true, //是否可拖拽
maskable: true, //是否有遮罩
isCancel: true, //是否有取消
confim : function () {
console. log( "点击了确定");
 
},
cancel() {
console. log( "点击了取消");
 
}

})

document. querySelector( ".showDailog"). onclick = function () {
d1. open();
}


let d2 = new ExtendsDailog({
width: "40%",
height: "250px",
title: "配置标题",
 
dragable: true, //是否可拖拽
maskable: true, //是否有遮罩
isCancel: true, //是否有取消
confim : function ( e) {
console. log( "点击了确定", e. detail. inputValue);
},
cancel() {
console. log( "点击了取消");
}

})

document. querySelector( ".extendsDailog"). onclick = function () {
d2. open();
}


< / script >

</ html >

猜你喜欢

转载自www.cnblogs.com/supermanGuo/p/11410202.html
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
开源日报 | 中学生开源前端动画引擎；全球首个Llama3 8B中文版开源模型；联想电脑恐出局；Linus讽刺AI炒作
周排行
浏览器对同一域名进行请求的最大并发连接数
React Hook之自定义Hook
【转】MyBatis缓存机制
-Java-泛型
自动化测试常用脚本-发送邮件
LeetCode#859: Buddy Strings
java、Python处理字符串
第二篇の博客
Hadoop伪分布式环境安装
SQL Server进阶（十一）临时表、表变量
每日归档
更多
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)
2024-04-18(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022