yuang-framework-ui-pc/es/ele-backtop/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, shallowRef, watch, onMounted, onBeforeUnmount, resolveComponent, createBlock, openBlock, Transition, withCtx, createElementBlock, createCommentVNode, normalizeStyle, renderSlot, createVNode } from "vue";
import { ElIcon } from "element-plus";
import { ArrowUp } from "../icons";
import { throttle } from "../utils/core";
import { backtopEmits, backtopProps } from "./props";
const _sfc_main = defineComponent({
  name: "EleBacktop",
  components: { ElIcon, ArrowUp },
  props: backtopProps,
  emits: backtopEmits,
  setup(props, { emit }) {
    const visible = ref(false);
    const targetEl = shallowRef(null);
    const updateTarget = (el) => {
      if (el !== targetEl.value && !(el == null && targetEl.value == null)) {
        targetEl.value = !el || typeof el === "string" ? null : el;
      }
    };
    const handleClick = (e) => {
      if (targetEl.value) {
        targetEl.value.scrollTo({ top: 0, behavior: "smooth" });
      }
      emit("click", e);
    };
    const handleScroll = () => {
      if (targetEl.value != null && props.visibilityHeight != null) {
        visible.value = targetEl.value.scrollTop >= props.visibilityHeight;
      } else {
        visible.value = false;
      }
    };
    const scrollListener = throttle(handleScroll, 300, true);
    const unbindEvent = () => {
      if (targetEl.value != null) {
        targetEl.value.removeEventListener("scroll", scrollListener);
        targetEl.value = null;
      }
    };
    const bindEvent = () => {
      unbindEvent();
      if (typeof props.target === "undefined") {
        updateTarget(document.body);
      } else if (typeof props.target === "string" && props.target) {
        updateTarget(document.querySelector(props.target));
      } else {
        updateTarget(props.target);
      }
      handleScroll();
      if (targetEl.value) {
        targetEl.value.addEventListener("scroll", scrollListener);
      }
    };
    watch(
      () => props.target,
      () => {
        bindEvent();
      }
    );
    onMounted(() => {
      bindEvent();
    });
    onBeforeUnmount(() => {
      unbindEvent();
    });
    return { visible, handleClick };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ArrowUp = resolveComponent("ArrowUp");
  const _component_ElIcon = resolveComponent("ElIcon");
  return openBlock(), createBlock(Transition, { name: _ctx.transitionName }, {
    default: withCtx(() => [
      _ctx.visible ? (openBlock(), createElementBlock("div", {
        key: 0,
        class: "ele-backtop",
        style: normalizeStyle({
          bottom: typeof _ctx.bottom === "number" ? `${_ctx.bottom}px` : _ctx.bottom,
          right: typeof _ctx.right === "number" ? `${_ctx.right}px` : _ctx.right
        }),
        onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
      }, [
        renderSlot(_ctx.$slots, "default", {}, () => [
          createVNode(_component_ElIcon, null, {
            default: withCtx(() => [
              createVNode(_component_ArrowUp)
            ]),
            _: 1
          })
        ])
      ], 4)) : createCommentVNode("", true)
    ]),
    _: 3
  }, 8, ["name"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};