面向对象：组件化小demo，可以拖拽的对话框
//页面元素
<button onclick="showDailog()">点击我显示对话框</button>
//js部分
//实例化对象里面传的参数 会覆盖掉默认参数
let demo = new Dailog({
width: "300px",
height: "250px",
title: "测试标题11",
content: "测试内容11",
left: '20%',//可以修改的left值
top: '100px',//可以修改的top值
dragable: true, //是否可拖拽
maskable: true, //是否有遮罩
isCancel: true //是否有取消
})
function showDailog() {
// 显示对话框
demo.showDailog();
}
//引入js文件代码
//自定义事件
class MyEvent {
constructor() {
this.handle = {};
}
addEvent(eventName, fn) {
if (typeof this.handle[eventName] === 'undefined') {
this.handle[eventName] = [];
}
this.handle[eventName].push(fn);
}
trigger(eventName) {
this.handle[eventName].forEach(event => {
event && event();
})
}
removeEvent(eventName, fn) {
for (let i = 0; i < this.handle[eventName].length; i++) {
if (this.handle[eventName][i] === fn) {
this.handle[eventName].splice(i, 1);
break;
}
}
}
}
//继承自定义事件
class Dailog extends MyEvent{
constructor(options) { //这里的options接收实例化传过来的对象
super(); //extends的继承要配合super()使用
let opts = Object.assign({ //assign（target,argument）argument会覆盖掉和target共有的值 并添加target没有的 返回一个新的对象
width: "20%",
height: "100px",
title: "默认标题",
content: "默认内容",
left: '576px',
top: '86px',
dragable: true, //是否可拖拽
maskable: true, //是否有遮罩
isCancel: false //是否有取消
}, options);
this.opts = opts;//把覆盖后的对象 挂在this上面 this指的是实例化后的对象
this.init();
}
//初始化
init() {
// 节点生成（节点隐藏）
this.renderView();
// 关闭对话框；
this.close();
//拖拽
this.dragable();
//初始一个开始的位置
}
//定义一个初始值 显示的时候让它为初始状态
fun(){
let kDialog = document.querySelector('.k-dialog');
kDialog.style.left = this.opts.left;
kDialog.style.top = this.opts.top;
}
// 显示对话框；
showDailog() {//通过样式显示隐藏；
if (this.opts.maskable) {
this.divEle.querySelector(".k-wrapper").style.display = "block";
}
this.divEle.querySelector(".k-dialog").style.display = "block";
this.fun();
}
// 隐藏对话框；隐藏遮罩；
close() {
this.addEvent("hideDailog",this.hideDailog.bind(this));
this.divEle.querySelector(".k-dialog").addEventListener("click", e => {
console.log(e.target.className);
switch (e.target.className) {
case "k-close":
this.trigger("hideDailog");
break;
case "k-default":
this.trigger("hideDailog");
break;
case 'k-primary':
this.trigger("hideDailog");
break;
}
})
}
hideDailog() {
console.log("??",this);
this.divEle.querySelector(".k-wrapper").style.display = "none";
this.divEle.querySelector(".k-dialog").style.display = "none";
}
//渲染视图；
renderView() {
let divEle = document.createElement("div");
divEle.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(divEle);
this.divEle = divEle;
}
//拖拽方法
dragable(){
//获取拖拽元素
let kDialog = document.querySelector('.k-dialog');
let startXy = {};//鼠标点击的xy位置
let nowXy = {};//鼠标现在xy的位置
let elXy = {} //元素的left top值
//获取现在的left top值 然后加上移动的距离 松开鼠标的时候让它停止移动
if(this.opts.dragable){
kDialog.addEventListener('mousedown',(e)=>{
startXy = {//记录鼠标按下位置
x: e.clientX,
y: e.clientY
}
elXy = {//获取元素left top值
x: parseInt(getComputedStyle(kDialog).left),
y: parseInt(getComputedStyle(kDialog).top)
}
//console.log(elXy.x,elXy.y)
document.addEventListener("mousemove",move);
document.addEventListener('mouseup',()=>{
document.removeEventListener('mousemove',move);
})
e.preventDefault();
})
let move = (e)=>{
nowXy = {//现在的位置
x: e.clientX,
y: e.clientY
}
let disXy = {//差值 移动的距离
x: nowXy.x - startXy.x,
y: nowXy.y - startXy.y
}
kDialog.style.left = elXy.x + disXy.x + 'px';
kDialog.style.top = elXy.y + disXy.y + 'px';
}
}else{
return false;
};
}
}
//作业： 实现dragable配置及功能；拖拽功能
// 文本框：1通过继承；2点击确定时候获取 input框内容
