BackTop.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121
  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. backTopProps: () => backTopProps,
  21. default: () => stdin_default
  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_util = require("../lazyload/vue-lazyload/util");
  28. var import_use = require("@vant/use");
  29. var import_icon = require("../icon");
  30. const [name, bem] = (0, import_utils.createNamespace)("back-top");
  31. const backTopProps = {
  32. right: import_utils.numericProp,
  33. bottom: import_utils.numericProp,
  34. target: [String, Object],
  35. offset: (0, import_utils.makeNumericProp)(200),
  36. teleport: {
  37. type: [String, Object],
  38. default: "body"
  39. }
  40. };
  41. var stdin_default = (0, import_vue2.defineComponent)({
  42. name,
  43. inheritAttrs: false,
  44. props: backTopProps,
  45. emits: ["click"],
  46. setup(props, {
  47. emit,
  48. slots,
  49. attrs
  50. }) {
  51. const show = (0, import_vue2.ref)(false);
  52. const root = (0, import_vue2.ref)();
  53. const scrollParent = (0, import_vue2.ref)();
  54. const style = (0, import_vue2.computed)(() => ({
  55. right: (0, import_utils.addUnit)(props.right),
  56. bottom: (0, import_utils.addUnit)(props.bottom)
  57. }));
  58. const onClick = (event) => {
  59. var _a;
  60. emit("click", event);
  61. (_a = scrollParent.value) == null ? void 0 : _a.scrollTo({
  62. top: 0,
  63. behavior: "smooth"
  64. });
  65. };
  66. const scroll = () => {
  67. show.value = scrollParent.value ? (0, import_utils.getScrollTop)(scrollParent.value) >= props.offset : false;
  68. };
  69. const getTarget = () => {
  70. const {
  71. target
  72. } = props;
  73. if (typeof target === "string") {
  74. const el = document.querySelector(target);
  75. if (el) {
  76. return el;
  77. }
  78. if (process.env.NODE_ENV !== "production") {
  79. console.error(`[Vant] BackTop: target element "${target}" was not found, the BackTop component will not be rendered.`);
  80. }
  81. } else {
  82. return target;
  83. }
  84. };
  85. const updateTarget = () => {
  86. if (import_utils.inBrowser) {
  87. (0, import_vue2.nextTick)(() => {
  88. scrollParent.value = props.target ? getTarget() : (0, import_use.getScrollParent)(root.value);
  89. scroll();
  90. });
  91. }
  92. };
  93. (0, import_use.useEventListener)("scroll", (0, import_util.throttle)(scroll, 100), {
  94. target: scrollParent
  95. });
  96. (0, import_vue2.onMounted)(updateTarget);
  97. (0, import_vue2.watch)(() => props.target, updateTarget);
  98. return () => {
  99. const Content = (0, import_vue.createVNode)("div", (0, import_vue.mergeProps)({
  100. "ref": root,
  101. "class": bem({
  102. active: show.value
  103. }),
  104. "style": style.value,
  105. "onClick": onClick
  106. }, attrs), [slots.default ? slots.default() : (0, import_vue.createVNode)(import_icon.Icon, {
  107. "name": "back-top",
  108. "class": bem("icon")
  109. }, null)]);
  110. if (props.teleport) {
  111. return (0, import_vue.createVNode)(import_vue2.Teleport, {
  112. "to": props.teleport
  113. }, {
  114. default: () => [Content]
  115. });
  116. }
  117. return Content;
  118. };
  119. }
  120. });