第一种方法:
html:
// 开闭原则:对内要封闭;对外开放;
let d1 = new Dailog({
width: "30%",
height: "250px",
title: "测试标题11",
content: "测试内容11",
dragable: true, //是否可拖拽
maskable: false, //是否有遮罩
isCancel: true //是否有取消
})
function showDailog1() {
// 显示对话框
d1.showDailog();
}
// let d2 = new Dailog({
// width: "30%",
// height: "250px",
// title: "测试标题11",
// content: "测试内容11",
// dragable: true, //是否可拖拽
// maskable: false, //是否有遮罩
// isCancel: false //是否有取消
// })
// function showDailog2() {
// // 显示对话框
// d2.showDailog();
// }
css:
.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 {
display: none;
position: fixed;
left: 0px;
top: 0px;
bottom: 0px;
right: 0px;
background: black;
opacity: 0.4;
z-index: 2000;
}
.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;
}
js:
class Dailog {
constructor(options) {
//默认配置合并;方式一;
// let { width="40%", height="240px"} = options;
// let newOpts = {
// width,
// height
// }
// console.log(newOpts);
// 方式二:
let opts = Object.assign({
width: "20%",
height: "100px",
title: "默认标题",
content: "默认内容",
dragable: true, //是否可拖拽
maskable: true, //是否有遮罩
isCancel: false //是否有取消
}, options);
// console.log(opts);
this.opts = opts;
this.init();
}
init() {
// 节点生成(节点隐藏)
this.renderView();
// 关闭对话框;
this.close();
}
// 显示对话框;
showDailog() {
//通过样式显示隐藏;
if (this.opts.maskable) {
this.divEle.querySelector(".k-wrapper").style.display = "block";
}
this.divEle.querySelector(".k-dialog").style.display = "block";
}
close() {
// 隐藏对话框;隐藏遮罩;
// document.querySelector(".k-wrapper").getElementsByClassName.display = "none";
console.log(this.divEle);
// let that = this;
// 原因
if (this.divEle.querySelector(".k-default")) {
this.divEle.querySelector(".k-default").onclick = () => {
this.divEle.querySelector(".k-wrapper").style.display = "none";
this.divEle.querySelector(".k-dialog").style.display = "none";
// document.querySelectorAll(".k-wrapper").style.display = "none";
// document.querySelectorAll(".k-dialog").style.display = "none";
}
}
this.divEle.querySelector(".k-primary").onclick = () => {
this.divEle.querySelector(".k-wrapper").style.display = "none";
this.divEle.querySelector(".k-dialog").style.display = "none";
}
this.divEle.querySelector(".k-close").onclick = () => {
this.divEle.querySelector(".k-wrapper").style.display = "none";
this.divEle.querySelector(".k-dialog").style.display = "none";
}
}
//渲染视图;
renderView() {
let divEle = document.createElement("div");
divEle.innerHTML = `