ocean95966 / element3 Goto Github PK

遇到的问题

• 使用useXcomposition api的组合形式.难点在与把当前实例的内容用户组件包裹起来,并且对外提供使用接口

what

• 为各种悬浮的组件(模板内容在组件外部,比如body)提供统一的使用接口,使用Teleport内置组件实现
• 不负责具体组件的内部逻辑, 负责一些公共的行为
  • open
  • close
  • zIndex

why

• vue3 teleport 内置组件提供这样一个处理办法
• 基于高阶组件实现,有利于把一些公用状态或者方法放在wrapper管理
• 每个组件的具体的行为不一致,所以只能抽取一些公共的行为
  • 比如: message 组件用户没有close方法, modal有close方法,控制close在各自的组件内维护,只需调用 Popup.close()就行了

how

• 服务端渲染不可以用

• 设置遮罩层样式
  • 是否有遮罩层(alert 没有遮罩层)
  • position: fixed
  • opacity
  • zindex 最后一个open的状态的组件应该在最上面
• 渲染组件
  • 调用open方法显示组件
  • 处理滚动条
  • 设置body不可以scroll
• 关闭组件
  • 设置body可以scroll
  • 设置定时器自动关闭
  • 移除组件
  • 移除监听的滚动event
  • 清除自动关闭的定时器
  • 点击遮罩层可以关闭组件
• 组件管理
  • 每个popup对应一个组件实例
  • 重复渲染的时候不用创建新的实例

refactor message

• zIndex 逻辑使用重构后的popup api
• 组件渲染逻辑交给popup api