案例：组件样式模板（1）

第一种方法：

---

html：

    

    

    

    

    

    

    

    点击我显示第一个对话框

    点击我显示第二个对话框

---

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 = `

        

            

                ${this.opts.title}X

            

            

                ${this.opts.content}