tdesign-mobile-vue
Version:
tdesign-mobile-vue
1 lines • 5.93 kB
Source Map (JSON)
{"version":3,"file":"sticky.mjs","sources":["../../src/sticky/sticky.tsx"],"sourcesContent":["import { computed, defineComponent, ref, watch } from 'vue';\nimport { useElementBounding } from '@vueuse/core';\nimport StickyProps from './props';\nimport config from '../config';\nimport { usePrefixClass } from '../hooks/useClass';\nimport { useTNodeJSX } from '../hooks/tnode';\n\nconst { prefix } = config;\n\nexport default defineComponent({\n name: `${prefix}-sticky`,\n props: StickyProps,\n setup(props) {\n const renderTNodeJSX = useTNodeJSX();\n const stickyBarClass = usePrefixClass('sticky');\n\n // box 用于占位和记录边界\n // content 用于实际定位\n const boxRef = ref<HTMLElement>();\n const { top: boxTop } = useElementBounding(boxRef);\n const contentRef = ref<HTMLElement>();\n const { top: contentTop, height } = useElementBounding(contentRef);\n\n const stickyStyle = computed(() => `height:${height.value}px;`);\n\n // container 容器，sticky不会超出该边界\n let container: HTMLElement;\n const containerHeight = ref(0);\n const containerTop = ref(0);\n\n // 监听页面滚动事件\n watch(boxTop, () => {\n if (props.container) {\n // @ts-ignore\n container = document.querySelector(props.container);\n const { top, height } = container.getBoundingClientRect();\n containerHeight.value = height;\n containerTop.value = top;\n }\n });\n\n // 通过改变 content 的定位来实现 sticky 效果\n const contentStyles = computed(() => {\n let styleStr = `z-index:${props.zIndex};`;\n let isFixed = false;\n if (props.disabled) return styleStr;\n const offsetTop = Number(props.offsetTop);\n if (container) {\n if (containerHeight.value + containerTop.value < offsetTop + height.value) {\n styleStr += `transform:translate3d(0, ${containerHeight.value - height.value}px, 0);`;\n } else if (boxTop.value <= offsetTop) {\n styleStr += `position:fixed;top:${offsetTop}px;`;\n isFixed = true;\n }\n } else if (boxTop.value <= offsetTop) {\n styleStr += `position:fixed;top:${offsetTop}px;`;\n isFixed = true;\n }\n props.onScroll?.({ scrollTop: contentTop.value, isFixed });\n return styleStr;\n });\n\n return () => (\n <div ref={boxRef} class={stickyBarClass.value} style={stickyStyle.value}>\n <div ref={contentRef} class={`${stickyBarClass.value}__content`} style={contentStyles.value}>\n {renderTNodeJSX('default')}\n </div>\n </div>\n );\n },\n});\n"],"names":["prefix","config","defineComponent","name","props","StickyProps","setup","renderTNodeJSX","useTNodeJSX","stickyBarClass","usePrefixClass","boxRef","ref","_useElementBounding","useElementBounding","boxTop","top","contentRef","_useElementBounding2","contentTop","height","stickyStyle","computed","concat","value","container","containerHeight","containerTop","watch","document","querySelector","_container$getBoundin","getBoundingClientRect","contentStyles","_props$onScroll","styleStr","zIndex","isFixed","disabled","offsetTop","Number","onScroll","call","scrollTop","_createVNode"],"mappings":"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"}