q群里的群友提出的问题 “如何使用面向对象的语法封装一个Modal框”
我们都知道，现在使用vue ，都是用组件去封装的，
怎么用对象去封装呢？我比较感兴趣，做了以下尝试
下面直接上代码
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>new1Model</title>
</head>
<body>
<script>
class Model {
constructor({height=200,width=600,title='标题',cancelText='取消',confirmText='确认',content='无'}={}) {
this.height = height;
this.width = width;
this.title = title;
this.cancelText = cancelText;
this.confirmText = confirmText;
this.content = content
this.isDesroty = false
}
create(){
this.isDesroty = false
// body
const bodyEle = document.getElementsByTagName('body')[0]
this.bodyEle = bodyEle
//主体
const modelEle = document.createElement('div')
this.modelEle = modelEle
modelEle.style.zIndex = '999'
modelEle.style.position = 'absolute'
modelEle.style.top = '50%'
modelEle.style.left = '50%'
modelEle.style.transform = `translate(calc(-50% - ${Math.random() > 0.5? - 100 * Math.random():100 *Math.random()}px),calc(-50% - ${Math.random() > 0.5? - 100 * Math.random():100 *Math.random()}px))`
modelEle.style.height = this.height + 'px'
modelEle.style.width = this.width + 'px'
modelEle.style.backgroundColor = '#fff'
modelEle.style.display = 'flex'
modelEle.style.flexDirection = 'column'
modelEle.style.alignContent = 'space-between'
modelEle.style.border = '1px solid #999'
//顶部
const topEle = document.createElement('div')
topEle.style.height = '30px'
topEle.style.lineHeight = '30px'
topEle.style.borderBottom = '1px solid #999'
topEle.innerText = this.title
//中间
const middleEle = document.createElement('div')
middleEle.innerText = this.content
middleEle.style.flex = 1
//底部
const bottomEle = document.createElement('div')
bottomEle.style.height = '40px'
bottomEle.style.display = 'flex'
bottomEle.style.borderTop = '1px solid #999'
bottomEle.style.justifyContent = 'flex-end'
//确认按钮
const confirmButtonEle = document.createElement('div')
confirmButtonEle.style.marginLeft = '10px'
confirmButtonEle.style.height = '40px'
confirmButtonEle.style.width = '120px'
confirmButtonEle.style.backgroundColor = 'blue'
confirmButtonEle.style.color = 'white'
confirmButtonEle.style.display = 'flex'
confirmButtonEle.style.justifyContent = 'center'
confirmButtonEle.style.alignItems = 'center'
confirmButtonEle.innerText = this.confirmText
//取消按钮
const cancelButtonEle = document.createElement('div')
cancelButtonEle.style.marginLeft = '10px'
cancelButtonEle.style.height = '40px'
cancelButtonEle.style.width = '120px'
cancelButtonEle.style.backgroundColor = 'red'
cancelButtonEle.style.color = 'white'
cancelButtonEle.style.display = 'flex'
cancelButtonEle.style.justifyContent = 'center'
cancelButtonEle.style.alignItems = 'center'
cancelButtonEle.innerText = this.cancelText
bottomEle.appendChild(confirmButtonEle)
bottomEle.appendChild(cancelButtonEle)
modelEle.appendChild(topEle)
modelEle.appendChild(middleEle)
modelEle.appendChild(bottomEle)
//挂载到页面上
bodyEle.appendChild(modelEle)
}
destory(){
this.bodyEle.removeChild(this.modelEle)
this.isDesroty = true
}
}
const model1 = new Model()
model1.create()
setInterval(() => {
if(model1.isDesroty){
model1.create()
}else{
model1.destory()
}
}, 1 * 1000);
</script>
</body>
</html>