Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

refactor popup service #532

Open
11 tasks done
ocean95966 opened this issue Dec 30, 2020 · 0 comments
Open
11 tasks done

refactor popup service #532

ocean95966 opened this issue Dec 30, 2020 · 0 comments
Labels
refactor Refactor old code

Comments

@ocean95966
Copy link
Contributor

ocean95966 commented Dec 30, 2020 •
edited
Loading

what

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

why

  • vue3 teleport 内置组件提供这样一个处理办法
  • 基于高阶组件实现,有利于把一些公用状态或者方法放在wrapper管理
  • 每个组件的具体的行为不一致,所以只能抽取一些公共的行为

how

  • 设置遮罩层样式
    • position: fixed
    • zindex 最后一个open的状态的组件应该在最上面
  • 渲染组件
    • 处理滚动条
    • 设置body不可以scroll
  • 关闭组件
    • 设置body可以scroll
    • 设置定时器自动关闭
    • 移除组件
    • 移除监听的滚动event
    • 点击遮罩层可以关闭组件
  • 组件管理
    • 每个popup对应一个组件实例
    • 重复渲染的时候不用创建新的实例
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
refactor Refactor old code
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@cuixiaorui @ocean95966