【金秋打卡】第19天 弹层组件关闭处理
2022/11/12 4:24:02
本文主要是介绍【金秋打卡】第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() }
课程收获
到这里就完成了整个弹层组件的开发,其实现流程是:
- 通过接口定义组件结构和组件构造参数的类型
- 定义组件的模板和模板
- 实现遮罩层
- 完成交互逻辑和展示内容
后面实现视频播放器组件后,渲染到弹层组件中进行展示。
这篇关于【金秋打卡】第19天 弹层组件关闭处理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?