为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【金秋打卡】第19天 弹层组件关闭处理

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

2022.11.11 00:23 69浏览

课程章节: 第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. 完成交互逻辑和展示内容

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

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
手记
粉丝
1
获赞与收藏
3

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

51篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

151篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消