You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
7.3 KiB
1 line
7.3 KiB
2 years ago
|
{"version":3,"file":"affix2.mjs","sources":["../../../../../../packages/components/affix/src/affix.vue"],"sourcesContent":["<template>\n <div ref=\"root\" :class=\"ns.b()\" :style=\"rootStyle\">\n <div :class=\"{ [ns.m('fixed')]: fixed }\" :style=\"affixStyle\">\n <slot />\n </div>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, onMounted, ref, shallowRef, watch, watchEffect } from 'vue'\nimport {\n useElementBounding,\n useEventListener,\n useWindowSize,\n} from '@vueuse/core'\nimport { addUnit, getScrollContainer, throwError } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { affixEmits, affixProps } from './affix'\nimport type { CSSProperties } from 'vue'\n\nconst COMPONENT_NAME = 'ElAffix'\ndefineOptions({\n name: COMPONENT_NAME,\n})\n\nconst props = defineProps(affixProps)\nconst emit = defineEmits(affixEmits)\n\nconst ns = useNamespace('affix')\n\nconst target = shallowRef<HTMLElement>()\nconst root = shallowRef<HTMLDivElement>()\nconst scrollContainer = shallowRef<HTMLElement | Window>()\nconst { height: windowHeight } = useWindowSize()\nconst {\n height: rootHeight,\n width: rootWidth,\n top: rootTop,\n bottom: rootBottom,\n update: updateRoot,\n} = useElementBounding(root, { windowScroll: false })\nconst targetRect = useElementBounding(target)\n\nconst fixed = ref(false)\nconst scrollTop = ref(0)\nconst transform = ref(0)\n\nconst rootStyle = computed<CSSProperties>(() => {\n return {\n height: fixed.value ? `${rootHeight.value}px` : '',\n width: fixed.value ? `${rootWidth.value}px` : '',\n }\n})\n\nconst affixStyle = computed<CSSProperties>(() => {\n if (!fixed.value) return {}\n\n const offset = props.offset ? addUnit(props.offset) : 0\n return {\n height: `${rootHeight.value}px`,\n width: `${rootWidth.value}px`,\n top: props.position === 'top' ? offset : '',\n bottom: props.position === 'bottom' ? offset : '',\n transform: transform.value ? `translateY(${transform.value}px)` : '',\n zIndex: props.zIndex,\n }\n})\n\nconst update = () => {\n if (!scrollContainer.value) return\n\n scrollTop.value =\n scrollContainer.value instanceof Window\n ? document.documentElement.scrollTop\n : scrollContainer.value.scrollTop || 0\n\n if (props.position === 'top') {\n if (props.target) {\n const difference =\n targetRect.bottom.value - props.offset - rootHeight.value\n fixed.value = props.offset > rootTop.value && targetRect.bottom.value > 0\n transform.value = difference < 0 ? difference : 0\n } else {\n fixed.value = props.offset > rootTop.value\n }\n } else if (props.target) {\n const difference =\n windowHeight.value -\n targetRect.top.value -\n props.offset -\n rootHeight.value\n fixed.value =\n windowHeight.value - props.offset < rootBottom.value &&\n windowHeight.value > targetRect.top.value\n transform.value = difference < 0 ? -difference : 0\n } else {\n fixed.value = windowHeight.value - props.offset < rootBottom.value\n }\n}\n\nconst handleScroll = () => {\n updateRoot()\n emit('scroll', {\n scrollTop: scrollTop.value,\n fixed: fixed.value,\n })\n}\n\nwatch(fixed, (val) => emit('change', val))\n\nonMounted(() => {\n if (props.target) {\n target.value =\n document.querySelector<HTMLElement>(props.target) ?? undefined\n if (!target.value)\n throwError(COMPONENT_NAME, `Target is not existed: ${props.target}`)\n } else {\n target.value = document.documentElement\n }\n scrollContainer.value = getScrollContainer(root.value!, true)\n updateRoot()\n})\n\nuseEventListener(scrollContainer, 'scroll', handleScroll)\nwatchEffect(update)\n\ndefineExpose({\n /** @description update affix status */\n update,\n /** @description update rootRect info */\n updateRoot,\n})\n</script>\n"],"names":[],"mappings":";;;;;;;;;;;;mCAqBc,CAAA;AAAA,EACZ,IAAM,EAAA,cAAA;AACR;;;;;;;AAKA,IAAM,MAAA,EAAA,GAAK,aAAa,OAAO,CAAA,CAAA;AAE/B,IAAA,MAAM,SAAS,UAAwB,EAAA,CAAA;AACvC,IAAA,MAAM,OAAO,UAA2B,EAAA,CAAA;AAC
|