[WIP][cdk:Overlay]: add cdk useInitialOverlay

LaamGinghong commented 3 years ago

[x] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

因为cdk useOverlay 只处理浮层的显示和定位，对于浮层的创建是不负责的。所以所以之前在使用 useOverlay 时，会在调用时就把所有的浮层都已经创建完，在复杂的场景下（如长表格且每个单元格都有浮层）会非常影响性能。同时这个逻辑对于多数浮层组件都可以进行复用，为此会新增一个 cdk useInitialOverlay 用于初始化浮层的所有逻辑

What does the proposed API look like?

希望的功能是在组件渲染之时，浮层不会跟着渲染（这里需要用到 v-if），然后在合适的时机渲染（这里会用到computed）。因此cdk大概会接收一个数组，返回一个Ref布尔值

import type { ComputedRef, Ref } from 'vue'

type UseInitialOverlayParams  = Ref<boolean>[]

type UseInitialOverlayResult = ComputedRef<boolean>

type UseInitialOverlay = (params?: UseInitialOverlayParams) => UseInitialOverlayResult // 默认参数为空数组

cdk 初次调用会返回 false ，之后当数组里面的值发生变化时，只要其中有一个为 true ，那么 cdk 会认为已经准备好可以渲染了，会返回 true

idux-bot[bot] commented 3 years ago

Translation of this issue:

[CDK: UseinitialoverLay]: Add CDK UseinitialoverLay

[x] i Have Searched The [https://github.com/iduxfe/idux/issues) of this repository and believe That this is not a duplicate.

What proBLEES THIS Feature SOLVE?

Because CDK USEoverLay only processes the display and positioning of the floating layer, it is not responsible for the creation of the floating layer. So, before using useoverlay, all floats have been created when they are called, under complex scenarios (such as long tables and floating layers each) will be very affecting performance. At the same time, this logic can be multiplexed for most floating components, and add a cdk useinitialoverLay to initialize all logic of the floating layer.

What does the proposed API Look Like?

Hopeful features When component rendering, the floating layer does not follow rendering (you need to use V-IF), then rendering in a suitable timing (here you will use computed). Therefore, CDK will probably receive an array, return a REF Boolean value. Import type {computedref, ref} from 'Vue'

Type UseinitialOverlayParams = Ref []

Type UseinitialoverLayResult = computedref

TYPE UseinitialoverLay = (params: useinitialoverlayparams) => UseinitialoverlayResult ` The CDK will return to false, then when the value in the array changes, as long as one isTrue, then the CDK will be ready to render, will return True

LaamGinghong commented 3 years ago

demo:

<script lang="ts">
import { defineComponent } from 'vue'
import { useInitialOverlay } from '@idux/components/core/use-initial-overlay'

export default defineComponent({
  setup() {
    const isInitial = useInitialOverlay()

    return {isInitial}
  }
 })
</script>

<template>
<div v-if="isInitial"></div>
</template>

LaamGinghong commented 3 years ago

暂时holding

danranVm commented 3 years ago

已通过 CdkPortal 懒加载的方式解决了该问题。

IDuxFE / idux