refactor popup service

[ocean95966]

what

• 为各种悬浮的组件(模板内容在组件外部,比如body)提供统一的使用接口,使用Teleport内置组件实现

• 不负责具体组件的内部逻辑, 负责一些公共的行为

  • open
  • close
  • zIndex

    why

• vue3 teleport 内置组件提供这样一个处理办法

• 基于高阶组件实现,有利于把一些公用状态或者方法放在wrapper管理

• 每个组件的具体的行为不一致,所以只能抽取一些公共的行为

  how

• 设置遮罩层样式

  • [x] position: fixed
  • [x] zindex 最后一个open的状态的组件应该在最上面

• 渲染组件

  • [x] 处理滚动条
  • [x] 设置body不可以scroll

• 关闭组件

  • [x] 设置body可以scroll
  • [x] 设置定时器自动关闭
  • [x] 移除组件
  • [x] 移除监听的滚动event
  • [x] 点击遮罩层可以关闭组件

• 组件管理

  • [x] 每个popup对应一个组件实例
  • [x] 重复渲染的时候不用创建新的实例