Skip to content
On this page

usePopupQueue

后端下发了一堆弹窗或者前端同时触发了多个弹窗,通过弹窗队列的方式去管理 保证全局或者某个组件内一次性只会弹出一个弹窗

示例

FirstPopup:
展开查看代码
vue
<script setup>
import SinglePopupIndex from '@hooks/feedback/usePopupQueue/demo/SinglePopupIndex.vue';
</script>
<div>
<SinglePopupIndex/>
</div>

使用思路

usePopupQueue 代码直接看上仓库看

使用时:

  • model 去使用 usePopupQueue 定义所有弹窗的静态配置和将后端传过来的 popupList 处理进弹窗队列中,并且导出给 外界使用的方法(外界不再接触 usePopupQueue)
  • 然后唯一弹窗入口组件 SinglePopupIndex.vue 使用 model 里的数据和方法
  • 具体到每一个弹窗组件只需要从 SinglePopupIndex 这里拿到传进来的数据进行展示和定义上一些事件即可

Released under the MIT License.