【金秋打卡】第19天 弹层组件关闭处理

课程名称：TypeScript封装播放器组件

课程章节： 第4章 Popup弹层组件开发 4-5

主讲老师：西门老舅

课程内容：

今天学习的内容是 Popup 弹层组件的交互（关闭）及弹层容器回调实现。

关闭弹层

给关闭图标添加事件监听，点击关闭图标后销毁弹层组件和遮罩层。

需要注意 this 指向的问题，事件的处理函数使用箭头函数，这样函数中的 this 就指向了当前所在的上下文，也就是 Popup 组件实例。

handle() {
    let popupCloseElm = this.tempContainer.querySelector('.icon-close')
    popupCloseElm?.addEventListener('click', () => {
      // 移除弹层组件
      document.body.removeChild(this.tempContainer)

      // 移除遮罩层
      this.options.mask && document.body.removeChild(this.maskElm)
    })
}

然后在初始化方法中调用 handle ：

init() {
    this.template()
    this.options.mask && this.createMask()
    this.handle()
}

content 回调函数

当唤起弹层组件后，还要通过执行 content 指定的回调函数，决定渲染什么内容。

创建一个 createContent 方法：

contentCallback() {
    let contentElm = this.tempContainer.querySelector('.content') as HTMLElement
    this.options.content && this.options.content(contentElm)
}

然后在初始化方法中调用 contentCallback：

init() {
    // ......
    
    this.createContent()
}

课程收获

到这里就完成了整个弹层组件的开发，其实现流程是：

1. 通过接口定义组件结构和组件构造参数的类型
2. 定义组件的模板和模板
3. 实现遮罩层
4. 完成交互逻辑和展示内容

后面实现视频播放器组件后，渲染到弹层组件中进行展示。