Sticky.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default,
  21. stickyProps: () => stickyProps
  22. });
  23. module.exports = __toCommonJS(stdin_exports);
  24. var import_vue = require("vue");
  25. var import_vue2 = require("vue");
  26. var import_utils = require("../utils");
  27. var import_use = require("@vant/use");
  28. var import_use_visibility_change = require("../composables/use-visibility-change");
  29. const [name, bem] = (0, import_utils.createNamespace)("sticky");
  30. const stickyProps = {
  31. zIndex: import_utils.numericProp,
  32. position: (0, import_utils.makeStringProp)("top"),
  33. container: Object,
  34. offsetTop: (0, import_utils.makeNumericProp)(0),
  35. offsetBottom: (0, import_utils.makeNumericProp)(0)
  36. };
  37. var stdin_default = (0, import_vue2.defineComponent)({
  38. name,
  39. props: stickyProps,
  40. emits: ["scroll", "change"],
  41. setup(props, {
  42. emit,
  43. slots
  44. }) {
  45. const root = (0, import_vue2.ref)();
  46. const scrollParent = (0, import_use.useScrollParent)(root);
  47. const state = (0, import_vue2.reactive)({
  48. fixed: false,
  49. width: 0,
  50. height: 0,
  51. transform: 0
  52. });
  53. const offset = (0, import_vue2.computed)(() => (0, import_utils.unitToPx)(props.position === "top" ? props.offsetTop : props.offsetBottom));
  54. const rootStyle = (0, import_vue2.computed)(() => {
  55. const {
  56. fixed,
  57. height,
  58. width
  59. } = state;
  60. if (fixed) {
  61. return {
  62. width: `${width}px`,
  63. height: `${height}px`
  64. };
  65. }
  66. });
  67. const stickyStyle = (0, import_vue2.computed)(() => {
  68. if (!state.fixed) {
  69. return;
  70. }
  71. const style = (0, import_utils.extend)((0, import_utils.getZIndexStyle)(props.zIndex), {
  72. width: `${state.width}px`,
  73. height: `${state.height}px`,
  74. [props.position]: `${offset.value}px`
  75. });
  76. if (state.transform) {
  77. style.transform = `translate3d(0, ${state.transform}px, 0)`;
  78. }
  79. return style;
  80. });
  81. const emitScroll = (scrollTop) => emit("scroll", {
  82. scrollTop,
  83. isFixed: state.fixed
  84. });
  85. const onScroll = () => {
  86. if (!root.value || (0, import_utils.isHidden)(root)) {
  87. return;
  88. }
  89. const {
  90. container,
  91. position
  92. } = props;
  93. const rootRect = (0, import_use.useRect)(root);
  94. const scrollTop = (0, import_utils.getScrollTop)(window);
  95. state.width = rootRect.width;
  96. state.height = rootRect.height;
  97. if (position === "top") {
  98. if (container) {
  99. const containerRect = (0, import_use.useRect)(container);
  100. const difference = containerRect.bottom - offset.value - state.height;
  101. state.fixed = offset.value > rootRect.top && containerRect.bottom > 0;
  102. state.transform = difference < 0 ? difference : 0;
  103. } else {
  104. state.fixed = offset.value > rootRect.top;
  105. }
  106. } else {
  107. const {
  108. clientHeight
  109. } = document.documentElement;
  110. if (container) {
  111. const containerRect = (0, import_use.useRect)(container);
  112. const difference = clientHeight - containerRect.top - offset.value - state.height;
  113. state.fixed = clientHeight - offset.value < rootRect.bottom && clientHeight > containerRect.top;
  114. state.transform = difference < 0 ? -difference : 0;
  115. } else {
  116. state.fixed = clientHeight - offset.value < rootRect.bottom;
  117. }
  118. }
  119. emitScroll(scrollTop);
  120. };
  121. (0, import_vue2.watch)(() => state.fixed, (value) => emit("change", value));
  122. (0, import_use.useEventListener)("scroll", onScroll, {
  123. target: scrollParent,
  124. passive: true
  125. });
  126. (0, import_use_visibility_change.useVisibilityChange)(root, onScroll);
  127. return () => {
  128. var _a;
  129. return (0, import_vue.createVNode)("div", {
  130. "ref": root,
  131. "style": rootStyle.value
  132. }, [(0, import_vue.createVNode)("div", {
  133. "class": bem({
  134. fixed: state.fixed
  135. }),
  136. "style": stickyStyle.value
  137. }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])]);
  138. };
  139. }
  140. });