标签：select play bsp 自定义 footer his type mouse ||
<!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>
标签：select play bsp 自定义 footer his type mouse ||
原文地址：https://www.cnblogs.com/supermanGuo/p/11410202.html
