SOURCE

console 命令行工具 X clear

                    
>
console
<!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>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tip {
      display: none;

      box-sizing: border-box;
      width: 390px;
      height: 260px;
      background: #fff;
      border: 1px solid rgba(0, 0, 0, .1);
      box-shadow: 1px 1px 5px rgb(0 0 0 / 20%);
    }

    .tip .top {
      box-sizing: border-box;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 14px;
      color: #333;
      padding: 0 10px;
      /* background: #eee; */
    }

    .tip .top span {
      display: inline-block;
      text-align: center;
      color: white;
      font-size: 10px;
      background: #333;
      padding: 8px;
      margin: 12px 0;
      line-height: 10px;
      border-radius: 50%;
      float: right;
      cursor: pointer;
    }

    .content {
      box-sizing: border-box;
      padding: 10px 14px;
      height: 150px;
      background: #eee;
    }

    .btns {
      height: 60px;
      margin: 12px auto;
    }

    .btns button {
      float: right;
      margin: 0 10px;
      padding: 5px 10px;
      border: 1px solid #dedede;
      cursor: pointer;
      outline: none;
      font-size: 14px;
    }

    .btns button:last-child {
      color: white;
      border-color: #1E9FFF;
      background-color: #1E9FFF;
    }
  </style>
</head>

<body>
  <!-- <div class="tip">
    <div class="top">标题
      <span class='close'>X</span>
    </div>
    <div class="content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Et, quae!
      </p>
    </div>
    <div class="btns">
      <button class='cancel'>取消</button>
      <button class='confirm'>确定</button>
    </div>
  </div> -->
  <script>
    const Tip = (function () {
      // 实现功能的类
      class Tip {
        constructor() {
          // 动态创建最外层 div
          this.ele = document.createElement("div")
          this.ele.className = 'tip'
          // 3.实现回调函数,添加一个属性是回调函数
          this.callback = function () { }

          this.bindEvent();
        }
        // 1.填充 this.el 的内容
        setContent(content = "默认值") {
          this.ele.innerHTML = `
        <div class="top">标题
          <span class='close'>X</span>
          </div>
          <div class="content">
            <p>${content}</p>
            </div>
            <div class="btns">
              <button class='cancel'>取消</button>
              <button class='confirm'>确定</button>
              </div>
              `;
          this.ele.style.display = 'block'
          document.body.appendChild(this.ele)
        }

        // 2.各种事件的绑定(必须基于事件委托来做)
        bindEvent() {
          this.ele.addEventListener('click', ev => {
            ev = ev || window.event;
            let target = ev.target || ev.srcElement;
            // 关闭
            if (target.className === 'close') {
              console.log('close...')
              this.ele.style.display = 'none'
            }
            // 确定
            if (target.className === 'confirm') {
              console.log('confirm...')
              this.ele.style.display = 'none'
              this.callback(true)
            }
            // 取消
            if (target.className === 'cancel') {
              console.log('cancel...')
              this.ele.style.display = 'none'
              this.callback(false)
            }
          })
        }


        // 3.修改样式
        setStyle(topBG, contetnBG) {
          this.ele.querySelector('.top').style.backgroundColor = topBG || '#fff';
          this.ele.querySelector('.content').style.backgroundColor = contetnBG || '#eee';
        }
      }

      // 单例核心代码
      let instance = null;
      return function singleTon(options = {}, cb) {
        if (!instance) instance = new Tip();

        instance.setContent(options.content);
        instance.callback = cb || function () { };
        instance.setStyle(options.topBG, options.contetnBG)


        return instance;
      }
    })();

    let t1 = new Tip({
      content: 'hello',
      topBG: "#ddd",
      contetnBG: "#eee"
    }, res => {
      console.log('1.res=>', res)
    });

  </script>
</body>

</html>