tdesign-vue-next/es/affix/affix.mjs.map

TDesign Component for vue-next

{"version":3,"file":"affix.mjs","sources":["../../../components/affix/affix.tsx"],"sourcesContent":["import { ref, watch, nextTick, onMounted, onBeforeUnmount, defineComponent, onActivated, onDeactivated } from 'vue';\nimport { isFunction, isUndefined } from 'lodash-es';\n\nimport { on, off, getScrollContainer } from '@tdesign/shared-utils';\nimport props from './props';\nimport { ScrollContainerElement } from '../common';\nimport { useContent, usePrefixClass } from '@tdesign/shared-hooks';\n\nexport default defineComponent({\n  name: 'TAffix',\n  props,\n  emits: ['fixedChange'],\n  setup(props, context) {\n    const COMPONENT_NAME = usePrefixClass('affix');\n    const renderContent = useContent();\n\n    const affixWrapRef = ref(null);\n    const affixRef = ref<HTMLElement>(null);\n    const placeholderEL = ref(document?.createElement('div')); // 占位节点\n    const ticking = ref(false);\n    const isBind = ref(false);\n\n    const scrollContainer = ref<ScrollContainerElement>();\n    const affixStyle = ref<Record<string, any>>();\n    let rAFId = 0;\n\n    const handleScroll = () => {\n      if (!ticking.value) {\n        rAFId = window.requestAnimationFrame(() => {\n          rAFId = 0;\n          const {\n            top: wrapToTop,\n            width: wrapWidth,\n            height: wrapHeight,\n          } = affixWrapRef.value?.getBoundingClientRect() ?? { top: 0, width: 0, height: 0 }; // top = 节点到页面顶部的距离，包含 scroll 中的高度\n\n          let containerTop = 0; // containerTop = 容器到页面顶部的距离\n          if (scrollContainer.value instanceof HTMLElement) {\n            containerTop = scrollContainer.value.getBoundingClientRect().top;\n          }\n\n          let fixedTop: number | false; // 0 -1 false 都有具体的意义\n          const calcTop = wrapToTop - containerTop; // 节点顶部到 container 顶部的距离\n\n          const containerHeight =\n            // @ts-ignore 这个的源头应该是在这里 type ScrollContainerElement = Window | HTMLElement;\n            scrollContainer.value[scrollContainer.value instanceof Window ? 'innerHeight' : 'clientHeight'] -\n            wrapHeight;\n          const calcBottom = containerTop + containerHeight - props.offsetBottom; // 计算 bottom 相对应的 top 值\n\n          if (!isUndefined(props.offsetTop) && calcTop <= props.offsetTop) {\n            // top 的触发\n            fixedTop = containerTop + props.offsetTop;\n          } else if (!isUndefined(props.offsetBottom) && wrapToTop >= calcBottom) {\n            // bottom 的触发\n            fixedTop = calcBottom;\n          } else {\n            fixedTop = false;\n          }\n\n          if (affixRef.value) {\n            const affixed = fixedTop !== false;\n            const placeholderStatus = affixWrapRef.value.contains(placeholderEL.value);\n\n            if (affixed) {\n              affixRef.value.className = COMPONENT_NAME.value;\n              affixStyle.value = {\n                top: `${fixedTop}px`,\n                width: `${wrapWidth}px`,\n                height: `${wrapHeight}px`,\n                zIndex: props.zIndex,\n              };\n\n              if (!placeholderStatus) {\n                placeholderEL.value.style.width = `${wrapWidth}px`;\n                placeholderEL.value.style.height = `${wrapHeight}px`;\n                affixWrapRef.value.appendChild(placeholderEL.value);\n              }\n            } else {\n              affixRef.value.removeAttribute('class');\n              affixStyle.value = undefined;\n              placeholderStatus && placeholderEL.value.remove();\n            }\n\n            context.emit('fixedChange', affixed, { top: Number(fixedTop) });\n            if (isFunction(props.onFixedChange)) props.onFixedChange(affixed, { top: Number(fixedTop) });\n          }\n\n          ticking.value = false;\n        });\n        ticking.value = true;\n      }\n    };\n\n    const bindScroll = async () => {\n      await nextTick();\n      if (isBind.value) return;\n      scrollContainer.value = getScrollContainer(props.container);\n      on(scrollContainer.value, 'scroll', handleScroll);\n      on(window, 'resize', handleScroll);\n      isBind.value = true;\n    };\n\n    const unbindScroll = () => {\n      if (!scrollContainer.value || !isBind.value) return;\n      off(scrollContainer.value, 'scroll', handleScroll);\n      off(window, 'resize', handleScroll);\n      if (rAFId) {\n        window.cancelAnimationFrame(rAFId);\n      }\n      isBind.value = false;\n    };\n\n    watch(\n      () => props.offsetTop,\n      () => {\n        handleScroll();\n      },\n    );\n\n    watch(\n      () => props.offsetBottom,\n      () => {\n        handleScroll();\n      },\n    );\n\n    watch(\n      () => props.zIndex,\n      () => {\n        handleScroll();\n      },\n    );\n\n    onMounted(bindScroll);\n\n    onActivated(bindScroll);\n\n    onDeactivated(unbindScroll);\n\n    onBeforeUnmount(unbindScroll);\n\n    context.expose({\n      scrollContainer,\n      affixWrapRef,\n      handleScroll,\n    });\n\n    return () => (\n      <div ref={affixWrapRef}>\n        <div ref={affixRef} style={affixStyle.value}>\n          {renderContent('default', 'content')}\n        </div>\n      </div>\n    );\n  },\n});\n"],"names":["defineComponent","name","props","emits","setup","context","_document","COMPONENT_NAME","usePrefixClass","renderContent","useContent","affixWrapRef","ref","affixRef","placeholderEL","document","createElement","ticking","isBind","scrollContainer","affixStyle","rAFId","handleScroll","value","window","requestAnimationFrame","_affixWrapRef$value$g","_affixWrapRef$value","_ref","getBoundingClientRect","top","width","height","wrapToTop","wrapWidth","wrapHeight","containerTop","HTMLElement","fixedTop","calcTop","containerHeight","Window","calcBottom","offsetBottom","isUndefined","offsetTop","affixed","placeholderStatus","contains","className","zIndex","style","concat","appendChild","removeAttribute","remove","emit","Number","isFunction","onFixedChange","bindScroll","_callee","_regeneratorRuntime","wrap","_context","prev","next","nextTick","abrupt","getScrollContainer","container","on","stop","unbindScroll","off","cancelAnimationFrame","watch","onMounted","onActivated","onDeactivated","onBeforeUnmount","expose","_createVNode"],"mappings":"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"}