es6 实现dialog组件的封装

Posted supermanguo

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了es6 实现dialog组件的封装相关的知识，希望对你有一定的参考价值。

<!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>

以上是关于es6 实现dialog组件的封装的主要内容，如果未能解决你的问题，请参考以下文章

微信小程序weui dialog封装,兼容wx.showModal

封装element-ui的dialog组件

element-dialog封装成子组件

vue+elementUi+dialog封装自定dialog部分属性，并打包成插件npm install mj-dialog --savedisplayjustifybetween

组件封装：es6转es5

封装弹窗/抽屉，使用hook函数形式减少template内部代码