[Day08] - 弹跳视窗 Modal - Slot 介绍

网页元件中 , 常会使用 Modal 这种类型的元件

如果我们将其制作成一个 <Modal> 的 WebComponent , 之後在使用时 , 应该会轻松不少吧 !

下面我们来制作 <Modal> 吧 !

前期准备

我们先到 CodePen 下载今天的 Modal 范本

• Modal 范例 > >

解压缩後 , 观察 html 中的 pop-up-container 结构

我们可以发现 Modal 的大致结构如下

<div class="pop-up-container" style="display: none;">
  <div class="pop-up-container-root">
    <div class="pop-up-box">
      <div class="pop-up-title">
        <h3>Title</h3>
        <close-icon/>
      </div>
      <div class="pop-up-content">
      </div>
      <div class="pop-up-action">
        <button onclick='closeModal()'>取消</button>
        <button onclick='closeModal()'>确定送出</button>
      </div>
    </div>
  </div>
</div>

有 pop-up-title . pop-up-content . pop-up-action 这 3 个区块需要塞入 html 内容

在 Day02 介绍 wired-element 时 , 我们了解到 slot 可以塞入 html 内容

不过 , 需要区分 pop-up-title . pop-up-content . pop-up-action 3 个区块的 slot 要如何制作呢 ?

Name Slot 的介绍

我们可以在 shadow-dom 中设定 <slot name="modal-body"> 在使用 <Modal> 时设定 slot="modal-body" ,

// in html usage 
<Modal>
  <h2 slot="modal-body">
    这是内文...这是内文...这是内文...这是内文...
  </h2>
</Modal>

// in web component 
class Modal extends HTMLElement {

  connectedCallback() {

    const htmlStr = `
        <div>
           其他文字
          <div class="pop-up-content">
            <h2 slot="modal-body">
              这是内文...这是内文...这是内文...这是内文...
            </h2>
          </div>
        </div>
    `

    // 启用 shadow dom
    this.attachShadow({mode: 'open'}).innerHTML = htmlStr
  }

}

window.customElements.define('my-modal', Modal);

其实做法跟 Vue 的 Slot 是相似的

实作开始

建立 customElements - my-modal

class Modal extends HTMLElement {

}

window.customElements.define('my-modal', Modal);

将 shadow-dom 开启 & 将 html 结构复制到 class 中

class Modal extends HTMLElement {

  connectedCallback() {

    const styleStr = `<link rel="stylesheet" href="./modal.css">`

    const htmlStr = `
        <div class="pop-up-container" style="display: none;">
          <div class="pop-up-container-root">
            <div class="pop-up-box">
              <div class="pop-up-title flex justifyContent">
               <h3>这是 Modal 的 Title</h3>
                <img class='close' src="./close.png" />
              </div>
              <div class="pop-up-content">
                这是 Modal 的 Body
              </div>
              <div class="pop-up-action flex justifyContent">
                  <button class='close'>取消</button>
                  <button class='confirm'>确定送出</button>
              </div>
            </div>
          </div>
        </div>
    `

    // 启用 shadow dom
    this.attachShadow({mode: 'open'}).innerHTML = styleStr + htmlStr
  }

}

window.customElements.define('my-modal', Modal);

将 Name Slot 设定到 html 中

• 将右侧的 3 区块 pop-up-title . pop-up-content . pop-up-action 设定对应的 slot

<div class="pop-up-box">
  <div class="pop-up-title flex justifyContent">
+   <slot name="modal-title"><h3>这是 Modal 的 Title</h3></slot>
    <img class='close' src="" />
  </div>
  <div class="pop-up-content">
+    <slot name="modal-body">这是 Modal 的 Body</slot>
  </div>
  <div class="pop-up-action flex justifyContent">
+    <slot name="modal-action">
       <button class='close'>取消</button>
       <button class='confirm'>确定送出</button>
+    </slot>
  </div>
</div>

设定 Modal 的 open . close 事件

class Modal extends HTMLElement {

  connectedCallback() {

    this.attachShadow({mode: 'open'}).innerHTML = styleStr + htmlStr

    this.shadowRoot.querySelector('.close:nth-child(1)').addEventListener('click', () => this._close())
    this.shadowRoot.querySelector('.close:nth-child(2)').addEventListener('click', () => this._close())
    this.shadowRoot.querySelector('.confirm').addEventListener('click', () => this._confirm())
  }

  _open() {

    const shadowRoot = this.shadowRoot;
    const modalWrap = shadowRoot.querySelector('.pop-up-container');
    const popup = modalWrap.querySelector('.pop-up-box');

    modalWrap.style.display = 'flex';
    popup.style.transform = 'scale(0)';

    setTimeout(() => popup.style.transform = 'scale(1)', 0)
  }

  _close() {

    const shadowRoot = this.shadowRoot;
    const modalWrap = shadowRoot.querySelector('.pop-up-container');
    const popup = modalWrap.querySelector('.pop-up-box');

    popup.style.transform = 'scale(0)';

    setTimeout(() => modalWrap.style.display = 'none', 300)
  }
  
}

window.customElements.define('my-modal', Modal);

在页面中使用 my-modal

<body>
<my-modal @confirm="() => console.log('确定送出 !')">
  <h2 slot="modal-title">
    表头写入
  </h2>
  <h2 slot="modal-body">
    这是内文...这是内文...这是内文...这是内文...
  </h2>
</my-modal>

<script src="./modal-wc.js"></script>
</body>
</html>

建立按钮来开启今天制作的 Modal

<button onclick='showModal()'>
  开启 Modal
</button>
<script>
  function showModal() {
    document.querySelector('my-modal')._open()
  }
</script>

完成 !!

成果

如果想直接体验成果 , 请到 web-component-modal.html 查看

题外话

其实 HTML Tag 有一个 <dialog> 跟今天制作的元件很相似

参考资料 :

• Udemy 课程 - Web Components & Stencil.js - Build Custom HTML Elements
• webcomponents 官方网站 - Using templates and slots