基于ES6的类封装一个弹框组件
/**
* 默认参数
* width: "30%",
* height: "200px",
* title: "测试标题",
* content: "测试内容",
* dragable: true, 是否可拖拽
* maskable: true, 是否有遮罩
* isCancel:false *是否有取消
* 方法：open打开、clone关闭、渲染randerView、拖拽
**/
html
<button class="dailog">点击显示弹框</button>
<button class="dailog1">点击显示弹框</button>
js
class Dailog{
constructor(option){
let newObj = Object.assign({
width: "30%",
height: "200px",
title: "测试标题",
content: "测试内容",
dragable: true,
maskable: true,
isCancel:false
},option || {});
this.options = newObj;
//初始化弹窗
this.init();
}
init(){
this.randerView();
this.closeFn();
this.dragableFn();
}
open(){
//打开弹窗
this.dailogContainer.querySelector(".k-dialog").style.display = "block";
if(this.options.maskable){
//打开遮罩
this.dailogContainer.querySelector(".k-wrapper").style.display = "block";
}
}
close(){
//关闭弹窗
this.dailogContainer.querySelector(".k-dialog").style.display = "none";
if(this.options.maskable){
//关闭遮罩
this.dailogContainer.querySelector(".k-wrapper").style.display = "none";
}
}
closeFn(){
let container = this.dailogContainer.querySelector(".k-dialog");
container.addEventListener("click", e => {
let ev = e || window.event;
if(ev.target.classList.contains("k-close")){
this.options.cancel();
this.close();
}
if(ev.target.classList.contains("k-default")){
this.options.cancel();
this.close();
}
if(ev.target.classList.contains("k-primary")){
this.options.confirm();
this.close();
}
})
}
dragableFn(){
if(this.options.dragable){
let dragContainer = this.dailogContainer.querySelector(".k-dialog");
dragContainer.onmousedown = (e) => {
let ev = e || window.event;
let x = ev.clientX - dragContainer.offsetLeft;
let y = ev.clientY - dragContainer.offsetTop;
document.onmousemove = (e) => {
let ev = e || window.event;
dragContainer.style.left = ev.clientX - x + "px";
dragContainer.style.top = ev.clientY - y + "px";
}
document.onmouseup = () => {
document.onmousemove = "";
};
};
}
}
randerView(){
//渲染视图
let dailogContainer = document.createElement("div");
dailogContainer.innerHTML = `
<div class="k-wrapper"></div>
<div class="k-dialog">
<div class="k-header">
<span class="k-title">${this.options.title}</span><span class="k-close">X</span>
</div>
<div class="k-body">
<span>${this.options.content}</span>
</div>
<div class="k-footer">
${this.options.isCancel ? '<span class="k-default">取消</span>': ''}
<span class="k-primary">确定</span>
</div>
</div> `
document.querySelector("body").appendChild(dailogContainer);
this.dailogContainer = dailogContainer;
}
}
let dailog = document.querySelector(".dailog");
let obj = new Dailog({
title: "第一个",
isCancel:true,
cancel: function(){
console.log("点击取消了。。。");
},
confirm: function(){
console.log("点击确认了。。。。");
}
});
dailog.addEventListener("click",function(){
obj.open();
})
