init

es/backTop/index.css

@@ -0,0 +1 @@
+.layui-backtop{position:fixed;right:30px;bottom:40px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:40px;background-color:#9f9f9f;color:#fff;border-radius:var(--global-border-radius);opacity:.95;z-index:999999}.layui-backtop :hover{opacity:.85}.layui-backtop-medium{width:40px;height:40px;font-size:30px}.layui-backtop-small{width:30px;height:30px;font-size:20px}

es/backTop/index.js

@@ -0,0 +1,178 @@
+import { w as withInstall } from "../badge/index2.js";
+import { defineComponent, ref, shallowRef, computed, onMounted, onBeforeUnmount, withDirectives, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, withModifiers, renderSlot, createVNode, vShow } from "vue";
+import { _ as _sfc_main$2E } from "../checkbox/index2.js";
+var index = /* @__PURE__ */ (() => ".layui-backtop{position:fixed;right:30px;bottom:40px;width:50px;height:50px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:40px;background-color:#9f9f9f;color:#fff;border-radius:var(--global-border-radius);opacity:.95;z-index:999999}.layui-backtop :hover{opacity:.85}.layui-backtop-medium{width:40px;height:40px;font-size:30px}.layui-backtop-small{width:30px;height:30px;font-size:20px}\n")();
+const _hoisted_1 = ["onClick"];
+const __default__ = {
+  name: "LayBacktop"
+};
+const _sfc_main = defineComponent({
+  ...__default__,
+  props: {
+    target: { default: "window" },
+    showHeight: { default: 200 },
+    disabled: { type: Boolean, default: false },
+    position: null,
+    right: null,
+    bottom: null,
+    size: null,
+    bgcolor: null,
+    opacity: null,
+    color: null,
+    borderRadius: null,
+    circle: { type: Boolean, default: false },
+    icon: { default: "layui-icon-top" },
+    iconSize: { default: 30 },
+    iconColor: null
+  },
+  emits: ["click"],
+  setup(__props, { emit }) {
+    const props = __props;
+    const backtopRef = ref(null);
+    const scrollTarget = shallowRef(void 0);
+    let visible = ref(props.showHeight === 0);
+    const classBacktop = computed(() => {
+      return {
+        "layui-backtop-medium": props.size === "medium",
+        "layui-backtop-small": props.size === "small"
+      };
+    });
+    const borderRadius = computed(() => {
+      if (props.circle) {
+        return "50%";
+      }
+      return typeof props.borderRadius === "number" ? `${props.borderRadius}px` : props.borderRadius;
+    });
+    const styleBacktop = computed(() => {
+      return {
+        position: props.position,
+        right: `${props.right}px`,
+        bottom: `${props.bottom}px`,
+        backgroundColor: props.bgcolor,
+        opacity: props.opacity,
+        color: props.color,
+        borderRadius: borderRadius.value
+      };
+    });
+    const easeInOut = (value) => {
+      return value < 0.5 ? 2 * value * value : 1 - 2 * (value - 1) * (value - 1);
+    };
+    const scrollToTop = () => {
+      if (!scrollTarget.value)
+        return;
+      if (scrollTarget.value instanceof Window) {
+        window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
+      } else {
+        const previous = Date.now();
+        const scrollHeight = scrollTarget.value.scrollTop;
+        const animationFunc = () => {
+          if (!scrollTarget.value || scrollTarget.value instanceof Window)
+            return;
+          const elapsed = (Date.now() - previous) / 450;
+          if (elapsed < 1) {
+            scrollTarget.value.scrollTop = scrollHeight * (1 - easeInOut(elapsed));
+            window.requestAnimationFrame(animationFunc);
+          } else {
+            scrollTarget.value.scrollTop = 0;
+          }
+        };
+        window.requestAnimationFrame(animationFunc);
+      }
+    };
+    const handleScroll = () => {
+      if (!scrollTarget.value)
+        return;
+      const scrollTop = scrollTarget.value instanceof Window ? window.pageYOffset : scrollTarget.value.scrollTop;
+      visible.value = scrollTop >= props.showHeight;
+    };
+    const handleClick = (event) => {
+      if (!props.disabled) {
+        scrollToTop();
+      }
+      emit("click", event);
+    };
+    const handlerMousedown = () => {
+      backtopRef.value.style.opacity = "1";
+    };
+    const handlerMouseup = () => {
+      backtopRef.value.style.opacity = "0.95";
+    };
+    const getScrollTarget = () => {
+      if (props.target === "window") {
+        return getScrollParent(backtopRef.value, false);
+      } else {
+        const targetElement = document.querySelector(props.target);
+        if (!targetElement) {
+          throw new Error(`target is not existed: ${props.target}`);
+        }
+        if (props.position === "absolute") {
+          if (!targetElement.parentElement) {
+            throw new Error(`target parent element is not existed: ${props.target}`);
+          }
+          targetElement.parentElement.style.position = "relative";
+        }
+        return targetElement;
+      }
+    };
+    const getScrollParent = (element, includeHidden) => {
+      let style = getComputedStyle(element);
+      let excludeStaticParent = style.position === "absolute";
+      let overflowRegex = includeHidden ? /(auto|scroll|hidden)/ : /(auto|scroll)/;
+      for (let parent = element; parent = parent.parentElement; ) {
+        style = getComputedStyle(parent);
+        if (excludeStaticParent && style.position === "static") {
+          continue;
+        }
+        if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX)) {
+          return parent;
+        }
+      }
+      return window;
+    };
+    const throttle = (func, wait) => {
+      var timer = null;
+      return (...args) => {
+        if (!timer) {
+          timer = setTimeout(() => {
+            timer = null;
+            func.apply(this, args);
+          }, wait);
+        }
+      };
+    };
+    const callback = throttle(handleScroll, 300);
+    onMounted(() => {
+      if (!props.target)
+        return;
+      scrollTarget.value = getScrollTarget();
+      scrollTarget.value.addEventListener("scroll", callback);
+    });
+    onBeforeUnmount(() => {
+      var _a;
+      (_a = scrollTarget.value) == null ? void 0 : _a.removeEventListener("scroll", callback);
+    });
+    return (_ctx, _cache) => {
+      return withDirectives((openBlock(), createElementBlock("div", {
+        ref_key: "backtopRef",
+        ref: backtopRef,
+        class: normalizeClass(["layui-backtop", unref(classBacktop)]),
+        style: normalizeStyle({ ...unref(styleBacktop) }),
+        onClick: withModifiers(handleClick, ["stop"]),
+        onMousedown: handlerMousedown,
+        onMouseup: handlerMouseup
+      }, [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createVNode(unref(_sfc_main$2E), {
+            type: props.icon,
+            size: `${props.iconSize}px`,
+            color: props.iconColor
+          }, null, 8, ["type", "size", "color"])
+        ])
+      ], 46, _hoisted_1)), [
+        [vShow, unref(visible)]
+      ]);
+    };
+  }
+});
+const component = withInstall(_sfc_main);
+export { component as default };