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