element-plus
Version:
A Component Library for Vue 3
1 lines • 6.34 kB
Source Map (JSON)
{"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')]: state.fixed }\" :style=\"affixStyle\">\n <slot></slot>\n </div>\n </div>\n</template>\n<script lang=\"ts\">\nimport {\n computed,\n defineComponent,\n onMounted,\n reactive,\n shallowRef,\n watch,\n} from 'vue'\nimport { useEventListener, useResizeObserver } from '@vueuse/core'\nimport { getScrollContainer } from '@element-plus/utils'\nimport { useNamespace } from '@element-plus/hooks'\nimport { affixEmits, affixProps } from './affix'\n\nimport type { CSSProperties } from 'vue'\n\nexport default defineComponent({\n name: 'ElAffix',\n\n props: affixProps,\n emits: affixEmits,\n\n setup(props, { emit }) {\n const ns = useNamespace('affix')\n\n const target = shallowRef<HTMLElement>()\n const root = shallowRef<HTMLDivElement>()\n const scrollContainer = shallowRef<HTMLElement | Window>()\n\n const state = reactive({\n fixed: false,\n height: 0, // height of root\n width: 0, // width of root\n scrollTop: 0, // scrollTop of documentElement\n clientHeight: 0, // clientHeight of documentElement\n transform: 0,\n })\n\n const rootStyle = computed<CSSProperties>(() => {\n return {\n height: state.fixed ? `${state.height}px` : '',\n width: state.fixed ? `${state.width}px` : '',\n }\n })\n\n const affixStyle = computed<CSSProperties | undefined>(() => {\n if (!state.fixed) return\n\n const offset = props.offset ? `${props.offset}px` : 0\n const transform = state.transform\n ? `translateY(${state.transform}px)`\n : ''\n\n return {\n height: `${state.height}px`,\n width: `${state.width}px`,\n top: props.position === 'top' ? offset : '',\n bottom: props.position === 'bottom' ? offset : '',\n transform,\n zIndex: props.zIndex,\n }\n })\n\n const update = () => {\n if (!root.value || !target.value || !scrollContainer.value) return\n\n const rootRect = root.value.getBoundingClientRect()\n const targetRect = target.value.getBoundingClientRect()\n state.height = rootRect.height\n state.width = rootRect.width\n state.scrollTop =\n scrollContainer.value instanceof Window\n ? document.documentElement.scrollTop\n : scrollContainer.value.scrollTop || 0\n state.clientHeight = document.documentElement.clientHeight\n\n if (props.position === 'top') {\n if (props.target) {\n const difference = targetRect.bottom - props.offset - state.height\n state.fixed = props.offset > rootRect.top && targetRect.bottom > 0\n state.transform = difference < 0 ? difference : 0\n } else {\n state.fixed = props.offset > rootRect.top\n }\n } else {\n if (props.target) {\n const difference =\n state.clientHeight - targetRect.top - props.offset - state.height\n state.fixed =\n state.clientHeight - props.offset < rootRect.bottom &&\n state.clientHeight > targetRect.top\n state.transform = difference < 0 ? -difference : 0\n } else {\n state.fixed = state.clientHeight - props.offset < rootRect.bottom\n }\n }\n }\n\n const onScroll = () => {\n update()\n\n emit('scroll', {\n scrollTop: state.scrollTop,\n fixed: state.fixed,\n })\n }\n\n watch(\n () => state.fixed,\n () => {\n emit('change', state.fixed)\n }\n )\n\n onMounted(() => {\n if (props.target) {\n target.value =\n document.querySelector<HTMLElement>(props.target) ?? undefined\n if (!target.value) {\n throw new Error(`Target is not existed: ${props.target}`)\n }\n } else {\n target.value = document.documentElement\n }\n scrollContainer.value = getScrollContainer(root.value!, true)\n })\n\n useEventListener(scrollContainer, 'scroll', onScroll)\n useResizeObserver(root, () => update())\n useResizeObserver(target, () => update())\n\n return {\n ns,\n root,\n state,\n rootStyle,\n affixStyle,\n update,\n }\n },\n})\n</script>\n"],"names":["_openBlock"],"mappings":";;;;;;;;;AAuBA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EAEN,OAAO;AAAA,EACP,OAAO;AAAA,EAEP,MAAM,OAAO,EAAE,QAAQ;AACrB,UAAM,KAAK,aAAa;AAExB,UAAM,SAAS;AACf,UAAM,OAAO;AACb,UAAM,kBAAkB;AAExB,UAAM,QAAQ,SAAS;AAAA,MACrB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,OAAO;AAAA,MACP,WAAW;AAAA,MACX,cAAc;AAAA,MACd,WAAW;AAAA;AAGb,UAAM,YAAY,SAAwB,MAAM;AAC9C,aAAO;AAAA,QACL,QAAQ,MAAM,QAAQ,GAAG,MAAM,aAAa;AAAA,QAC5C,OAAO,MAAM,QAAQ,GAAG,MAAM,YAAY;AAAA;AAAA;AAI9C,UAAM,aAAa,SAAoC,MAAM;AAC3D,UAAI,CAAC,MAAM;AAAO;AAElB,YAAM,SAAS,MAAM,SAAS,GAAG,MAAM,aAAa;AACpD,YAAM,YAAY,MAAM,YACpB,cAAc,MAAM,iBACpB;AAEJ,aAAO;AAAA,QACL,QAAQ,GAAG,MAAM;AAAA,QACjB,OAAO,GAAG,MAAM;AAAA,QAChB,KAAK,MAAM,aAAa,QAAQ,SAAS;AAAA,QACzC,QAAQ,MAAM,aAAa,WAAW,SAAS;AAAA,QAC/C;AAAA,QACA,QAAQ,MAAM;AAAA;AAAA;AAIlB,UAAM,SAAS,MAAM;AACnB,UAAI,CAAC,KAAK,SAAS,CAAC,OAAO,SAAS,CAAC,gBAAgB;AAAO;AAE5D,YAAM,WAAW,KAAK,MAAM;AAC5B,YAAM,aAAa,OAAO,MAAM;AAChC,YAAM,SAAS,SAAS;AACxB,YAAM,QAAQ,SAAS;AACvB,YAAM,YACJ,gBAAgB,iBAAiB,SAC7B,SAAS,gBAAgB,YACzB,gBAAgB,MAAM,aAAa;AACzC,YAAM,eAAe,SAAS,gBAAgB;AAE9C,UAAI,MAAM,aAAa,OAAO;AAC5B,YAAI,MAAM,QAAQ;AAChB,gBAAM,aAAa,WAAW,SAAS,MAAM,SAAS,MAAM;AAC5D,gBAAM,QAAQ,MAAM,SAAS,SAAS,OAAO,WAAW,SAAS;AACjE,gBAAM,YAAY,aAAa,IAAI,aAAa;AAAA,eAC3C;AACL,gBAAM,QAAQ,MAAM,SAAS,SAAS;AAAA;AAAA,aAEnC;AACL,YAAI,MAAM,QAAQ;AAChB,gBAAM,aACJ,MAAM,eAAe,WAAW,MAAM,MAAM,SAAS,MAAM;AAC7D,gBAAM,QACJ,MAAM,eAAe,MAAM,SAAS,SAAS,UAC7C,MAAM,eAAe,WAAW;AAClC,gBAAM,YAAY,aAAa,IAAI,CAAC,aAAa;AAAA,eAC5C;AACL,gBAAM,QAAQ,MAAM,eAAe,MAAM,SAAS,SAAS;AAAA;AAAA;AAAA;AAKjE,UAAM,WAAW,MAAM;AACrB;AAEA,WAAK,UAAU;AAAA,QACb,WAAW,MAAM;AAAA,QACjB,OAAO,MAAM;AAAA;AAAA;AAIjB,UACE,MAAM,MAAM,OACZ,MAAM;AACJ,WAAK,UAAU,MAAM;AAAA;AAIzB,cAAU,MAAM;AACd,UAAI;AACF,eAAO;AAEP,oBAAY;AACV,oBAAU;AAAsC;AAAA;AAGlD;AAAwB;AAE1B;AAAwD;AAG1D;AACA;AACA,sBAAkB;AAElB;AAAO;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;SA/IK;AAAM,SAAOA;AAAA,IAAW;AAAO;;AACtC;AAAW,4BAA4C;AAAU;;AAC/D;;;;;;;;;"}