Komorebi_q的博客

原创 Vue项目中如何实现弹窗系统的封装

第三个参数中插槽的使用，用来指定子元素渲染的位置。弹窗列表仅在单个页面有效，而弹窗列表是全局变量，故当切换其他页面时，应该清空弹窗列表。由于渲染函数优先级，如果在setup()钩子中返回渲染函数，Vue将会忽略组件的。导出一个clearComponentList()，用于清空弹窗列表。该组件为每一个弹窗组件的外层包裹组件，主要作用是抽离公共样式。从hook中获取弹窗列表，调用h函数，返回渲染函数。导出一个showModal()，用于打开弹窗。使用渲染函数，设置弹窗出口。，用来储存将要渲染的组件。