前天为群友写的，使用面向对象的写法封装一个Modal Dialogue Box

image

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>
posted @ 2022-09-24 19:05  睡成蛆  阅读(38)  评论(0)  编辑  收藏  举报