tav-ui
Version:
1 lines • 3.93 kB
Source Map (JSON)
{"version":3,"file":"useHeight2.mjs","sources":["../../../../../../../../packages/components/table-pro/src/hooks/useHeight.ts"],"sourcesContent":["import { computed, nextTick, onActivated, onBeforeUnmount, onMounted, ref, unref } from 'vue'\nimport { addResizeListener, removeResizeListener } from '@tav-ui/utils/event'\nimport type { TableProInstance, TableProProps } from '../types'\nimport type { ComputedRef, Ref } from 'vue'\nimport type { Emitter } from '@tav-ui/utils/mitt'\n\n/**\n * 手动计算表格内容区域高度\n * 表格高度，height设置百分比会跳动，设置auto后需要手动把剩余空间的高度计算后赋值\n * @returns\n */\nexport function useHeight(\n wrapperRef: any,\n operationRef: any\n): {\n getHeight: ComputedRef<string>\n setHeight: () => void\n} {\n const height = ref('100%')\n\n const getHeight = computed(() => unref(height))\n\n const setHeight = () => {\n if (unref(wrapperRef) && unref(operationRef)) {\n // getBoundingClientRect 会被 transform scale 影响\n // const { height: wrapperHeight } = unref(wrapperRef)!.getBoundingClientRect()\n // const { height: operationHeight } = unref(operationRef)!.getBoundingClientRect()\n const wrapperHeight = unref(wrapperRef)!.offsetHeight\n const operationHeight = unref(operationRef)!.offsetHeight\n height.value = `${wrapperHeight - operationHeight}px`\n }\n }\n\n return {\n getHeight,\n setHeight,\n }\n}\n\nexport function useFixHeight(\n tableRef: Ref<TableProInstance | null>,\n wrapperRef: any,\n setHeight: () => void,\n tableEmitter: Emitter,\n tablePropsRef: ComputedRef<TableProProps>\n) {\n const reCalculate = () => {\n setHeight()\n nextTick(() => {\n unref(tableRef)?.recalculate(true)\n })\n }\n\n if (unref(tablePropsRef).showOperations) {\n // onMounted 确保table rendered，但filter-form中的schema有可能异步渲染所以需要监听\n onMounted(() => {\n tableEmitter.on('table-pro:filter-form-rendered', () => {\n const parentEl = unref(wrapperRef)?.parentElement\n reCalculate() // 手动调用一次，因为异步传入schema后，监听的parentEl其实没有变化，并不会触发reCalculate\n addResizeListener(parentEl, reCalculate)\n })\n })\n\n onActivated(() => {\n // keepalive 中需要重新布局\n reCalculate()\n })\n\n onBeforeUnmount(() => {\n const parentEl = unref(wrapperRef)?.parentElement\n removeResizeListener(parentEl, reCalculate)\n })\n }\n}\n"],"names":[],"mappings":";;;AAEO,SAAS,SAAS,CAAC,UAAU,EAAE,YAAY,EAAE;AACpD,EAAE,MAAM,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC;AAC7B,EAAE,MAAM,SAAS,GAAG,QAAQ,CAAC,MAAM,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;AAClD,EAAE,MAAM,SAAS,GAAG,MAAM;AAC1B,IAAI,IAAI,KAAK,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,EAAE;AAClD,MAAM,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,YAAY,CAAC;AAC3D,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,YAAY,CAAC;AAC/D,MAAM,MAAM,CAAC,KAAK,GAAG,CAAC,EAAE,aAAa,GAAG,eAAe,CAAC,EAAE,CAAC,CAAC;AAC5D,KAAK;AACL,GAAG,CAAC;AACJ,EAAE,OAAO;AACT,IAAI,SAAS;AACb,IAAI,SAAS;AACb,GAAG,CAAC;AACJ,CAAC;AACM,SAAS,YAAY,CAAC,QAAQ,EAAE,UAAU,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE;AAC3F,EAAE,MAAM,WAAW,GAAG,MAAM;AAC5B,IAAI,SAAS,EAAE,CAAC;AAChB,IAAI,QAAQ,CAAC,MAAM;AACnB,MAAM,KAAK,CAAC,QAAQ,CAAC,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;AACzC,KAAK,CAAC,CAAC;AACP,GAAG,CAAC;AACJ,EAAE,IAAI,KAAK,CAAC,aAAa,CAAC,CAAC,cAAc,EAAE;AAC3C,IAAI,SAAS,CAAC,MAAM;AACpB,MAAM,YAAY,CAAC,EAAE,CAAC,gCAAgC,EAAE,MAAM;AAC9D,QAAQ,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC;AAC1D,QAAQ,WAAW,EAAE,CAAC;AACtB,QAAQ,iBAAiB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;AACjD,OAAO,CAAC,CAAC;AACT,KAAK,CAAC,CAAC;AACP,IAAI,WAAW,CAAC,MAAM;AACtB,MAAM,WAAW,EAAE,CAAC;AACpB,KAAK,CAAC,CAAC;AACP,IAAI,eAAe,CAAC,MAAM;AAC1B,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,EAAE,aAAa,CAAC;AACxD,MAAM,oBAAoB,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC;AAClD,KAAK,CAAC,CAAC;AACP,GAAG;AACH;;;;"}