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

XDesign Component for vue-next

{"version":3,"file":"affix.mjs","sources":["../../src/affix/affix.tsx"],"sourcesContent":["import { ref, watch, nextTick, onMounted, onBeforeUnmount, defineComponent, onActivated, onDeactivated } from 'vue';\nimport isFunction from 'lodash/isFunction';\nimport isUndefined from 'lodash/isUndefined';\n\nimport { on, off, getScrollContainer } from '../utils/dom';\nimport props from './props';\nimport { ScrollContainerElement } from '../common';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { useTNodeJSX } from '../hooks/tnode';\n\nexport default defineComponent({\n  name: 'XAffix',\n  props,\n  emits: ['fixedChange'],\n  setup(props, context) {\n    const COMPONENT_NAME = usePrefixClass('affix');\n    const renderTNodeJSX = useTNodeJSX();\n\n    const affixWrapRef = ref<HTMLElement>(null);\n    const affixRef = ref<HTMLElement>(null);\n    const placeholderEL = ref(document?.createElement('div')); // 占位节点\n    const ticking = ref(false);\n    const binded = 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            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 (binded.value) return;\n      scrollContainer.value = getScrollContainer(props.container);\n      on(scrollContainer.value, 'scroll', handleScroll);\n      on(window, 'resize', handleScroll);\n      binded.value = true;\n    };\n\n    const unbindScroll = () => {\n      if (!scrollContainer.value || !binded.value) return;\n      off(scrollContainer.value, 'scroll', handleScroll);\n      off(window, 'resize', handleScroll);\n      if (rAFId) {\n        window.cancelAnimationFrame(rAFId);\n      }\n      binded.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    return {\n      affixWrapRef,\n      affixRef,\n      bindScroll,\n      unbindScroll,\n      handleScroll,\n      scrollContainer,\n      renderTNodeJSX,\n      affixStyle,\n    };\n  },\n  render() {\n    return (\n      <div ref=\"affixWrapRef\">\n        <div ref=\"affixRef\" style={this.affixStyle}>\n          {this.renderTNodeJSX('default')}\n        </div>\n      </div>\n    );\n  },\n});\n"],"names":["name","props","setup","rAFId","top","width","height","isUndefined","fixedTop","affixRef","affixStyle","placeholderStatus","context","isFunction","_regeneratorRuntime","_context","on","off","window","watch","handleScroll","affixWrapRef","bindScroll","unbindScroll","scrollContainer","renderTNodeJSX","_createVNode"],"mappings":"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"}