0f1697fe75eb46d26240d0ade94821503d283af1c6d7aed2bc86acf43d6d7aeaef7875b7e7b19679e9535e2064f09bdf5b408de70b7198d8ba8541322ff8d0 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var affix = require('./affix.js');
  6. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  7. var index = require('../../../hooks/use-namespace/index.js');
  8. var scroll = require('../../../utils/dom/scroll.js');
  9. var style = require('../../../utils/dom/style.js');
  10. var event = require('../../../constants/event.js');
  11. var error = require('../../../utils/error.js');
  12. const COMPONENT_NAME = "ElAffix";
  13. const __default__ = vue.defineComponent({
  14. name: COMPONENT_NAME
  15. });
  16. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  17. ...__default__,
  18. props: affix.affixProps,
  19. emits: affix.affixEmits,
  20. setup(__props, { expose, emit }) {
  21. const props = __props;
  22. const ns = index.useNamespace("affix");
  23. const target = vue.shallowRef();
  24. const root = vue.shallowRef();
  25. const scrollContainer = vue.shallowRef();
  26. const { height: windowHeight } = core.useWindowSize();
  27. const {
  28. height: rootHeight,
  29. width: rootWidth,
  30. top: rootTop,
  31. bottom: rootBottom,
  32. update: updateRoot
  33. } = core.useElementBounding(root, { windowScroll: false });
  34. const targetRect = core.useElementBounding(target);
  35. const fixed = vue.ref(false);
  36. const scrollTop = vue.ref(0);
  37. const transform = vue.ref(0);
  38. const rootStyle = vue.computed(() => {
  39. return {
  40. height: fixed.value ? `${rootHeight.value}px` : "",
  41. width: fixed.value ? `${rootWidth.value}px` : ""
  42. };
  43. });
  44. const affixStyle = vue.computed(() => {
  45. if (!fixed.value)
  46. return {};
  47. const offset = props.offset ? style.addUnit(props.offset) : 0;
  48. return {
  49. height: `${rootHeight.value}px`,
  50. width: `${rootWidth.value}px`,
  51. top: props.position === "top" ? offset : "",
  52. bottom: props.position === "bottom" ? offset : "",
  53. transform: transform.value ? `translateY(${transform.value}px)` : "",
  54. zIndex: props.zIndex
  55. };
  56. });
  57. const update = () => {
  58. if (!scrollContainer.value)
  59. return;
  60. scrollTop.value = scrollContainer.value instanceof Window ? document.documentElement.scrollTop : scrollContainer.value.scrollTop || 0;
  61. const { position, target: target2, offset } = props;
  62. const rootHeightOffset = offset + rootHeight.value;
  63. if (position === "top") {
  64. if (target2) {
  65. const difference = targetRect.bottom.value - rootHeightOffset;
  66. fixed.value = offset > rootTop.value && targetRect.bottom.value > 0;
  67. transform.value = difference < 0 ? difference : 0;
  68. } else {
  69. fixed.value = offset > rootTop.value;
  70. }
  71. } else if (target2) {
  72. const difference = windowHeight.value - targetRect.top.value - rootHeightOffset;
  73. fixed.value = windowHeight.value - offset < rootBottom.value && windowHeight.value > targetRect.top.value;
  74. transform.value = difference < 0 ? -difference : 0;
  75. } else {
  76. fixed.value = windowHeight.value - offset < rootBottom.value;
  77. }
  78. };
  79. const updateRootRect = async () => {
  80. if (!fixed.value) {
  81. updateRoot();
  82. return;
  83. }
  84. fixed.value = false;
  85. await vue.nextTick();
  86. updateRoot();
  87. fixed.value = true;
  88. };
  89. const handleScroll = async () => {
  90. updateRoot();
  91. await vue.nextTick();
  92. emit("scroll", {
  93. scrollTop: scrollTop.value,
  94. fixed: fixed.value
  95. });
  96. };
  97. vue.watch(fixed, (val) => emit(event.CHANGE_EVENT, val));
  98. vue.onMounted(() => {
  99. var _a;
  100. if (props.target) {
  101. target.value = (_a = document.querySelector(props.target)) != null ? _a : void 0;
  102. if (!target.value)
  103. error.throwError(COMPONENT_NAME, `Target does not exist: ${props.target}`);
  104. } else {
  105. target.value = document.documentElement;
  106. }
  107. scrollContainer.value = scroll.getScrollContainer(root.value, true);
  108. updateRoot();
  109. });
  110. core.useEventListener(scrollContainer, "scroll", handleScroll);
  111. vue.watchEffect(update);
  112. expose({
  113. update,
  114. updateRoot: updateRootRect
  115. });
  116. return (_ctx, _cache) => {
  117. return vue.openBlock(), vue.createElementBlock("div", {
  118. ref_key: "root",
  119. ref: root,
  120. class: vue.normalizeClass(vue.unref(ns).b()),
  121. style: vue.normalizeStyle(vue.unref(rootStyle))
  122. }, [
  123. vue.createElementVNode("div", {
  124. class: vue.normalizeClass({ [vue.unref(ns).m("fixed")]: fixed.value }),
  125. style: vue.normalizeStyle(vue.unref(affixStyle))
  126. }, [
  127. vue.renderSlot(_ctx.$slots, "default")
  128. ], 6)
  129. ], 6);
  130. };
  131. }
  132. });
  133. var Affix = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "affix.vue"]]);
  134. exports["default"] = Affix;
  135. //# sourceMappingURL=affix2.js.map