yuang-framework-ui-pc/lib/ele-backtop/index.cjs

yuang-framework-ui-pc Library

"use strict";
const vue = require("vue");
const elementPlus = require("element-plus");
const icons = require("../icons");
const core = require("../utils/core");
const props = require("./props");
const _sfc_main = vue.defineComponent({
  name: "EleBacktop",
  components: { ElIcon: elementPlus.ElIcon, ArrowUp: icons.ArrowUp },
  props: props.backtopProps,
  emits: props.backtopEmits,
  setup(props2, { emit }) {
    const visible = vue.ref(false);
    const targetEl = vue.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 && props2.visibilityHeight != null) {
        visible.value = targetEl.value.scrollTop >= props2.visibilityHeight;
      } else {
        visible.value = false;
      }
    };
    const scrollListener = core.throttle(handleScroll, 300, true);
    const unbindEvent = () => {
      if (targetEl.value != null) {
        targetEl.value.removeEventListener("scroll", scrollListener);
        targetEl.value = null;
      }
    };
    const bindEvent = () => {
      unbindEvent();
      if (typeof props2.target === "undefined") {
        updateTarget(document.body);
      } else if (typeof props2.target === "string" && props2.target) {
        updateTarget(document.querySelector(props2.target));
      } else {
        updateTarget(props2.target);
      }
      handleScroll();
      if (targetEl.value) {
        targetEl.value.addEventListener("scroll", scrollListener);
      }
    };
    vue.watch(
      () => props2.target,
      () => {
        bindEvent();
      }
    );
    vue.onMounted(() => {
      bindEvent();
    });
    vue.onBeforeUnmount(() => {
      unbindEvent();
    });
    return { visible, handleClick };
  }
});
const _export_sfc = (sfc, props2) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props2) {
    target[key] = val;
  }
  return target;
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ArrowUp = vue.resolveComponent("ArrowUp");
  const _component_ElIcon = vue.resolveComponent("ElIcon");
  return vue.openBlock(), vue.createBlock(vue.Transition, { name: _ctx.transitionName }, {
    default: vue.withCtx(() => [
      _ctx.visible ? (vue.openBlock(), vue.createElementBlock("div", {
        key: 0,
        class: "ele-backtop",
        style: vue.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))
      }, [
        vue.renderSlot(_ctx.$slots, "default", {}, () => [
          vue.createVNode(_component_ElIcon, null, {
            default: vue.withCtx(() => [
              vue.createVNode(_component_ArrowUp)
            ]),
            _: 1
          })
        ])
      ], 4)) : vue.createCommentVNode("", true)
    ]),
    _: 3
  }, 8, ["name"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
module.exports = index;