Sticky.js 4.7 KB

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