@wocwin/t-ui-plus/es/packages/components/layout-page/src/index.vue2.mjs

Page level components developed based on Element Plus.

import { defineComponent, ref, watch, onMounted, onActivated, resolveComponent, createElementBlock, openBlock, normalizeClass, renderSlot, createCommentVNode, createVNode, normalizeProps, guardReactiveProps, withCtx, unref } from 'vue';
import { CaretTop } from '@element-plus/icons-vue';

const _hoisted_1 = {
  key: 0,
  class: "back_to_top"
};
var _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "TLayoutPage"
  },
  __name: "index",
  props: {
    keepScrollDisabled: { type: Boolean, default: false },
    isNoMargin: { type: Boolean, default: false },
    showGoTopButton: { type: Boolean, default: true },
    scrollToTop: { default: 100 }
  },
  setup(__props) {
    const props = __props;
    const isShowGoTopButton = ref(false);
    const TLayoutPageRef = ref(null);
    const scrollTop = ref(0);
    watch(
      () => scrollTop.value,
      (newVal) => {
        if (newVal > props.scrollToTop) {
          isShowGoTopButton.value = true;
        } else {
          isShowGoTopButton.value = false;
        }
      }
    );
    const backToTop = () => {
      scrollTop.value = 0;
      TLayoutPageRef.value.scrollTo({
        top: 0,
        behavior: "smooth"
      });
    };
    onMounted(() => {
      const pageItems = TLayoutPageRef.value.querySelectorAll(".t_layout_page_item");
      if (pageItems.length === 2) {
        pageItems[0].style.marginBottom = "8px";
      }
      if (pageItems.length > 2) {
        pageItems.forEach((item) => {
          item.style.marginBottom = "8px";
        });
        pageItems[pageItems.length - 1].style.marginBottom = "0";
      }
    });
    onActivated(() => {
      if (!props.keepScrollDisabled) {
        ;
        TLayoutPageRef.value.scrollTop = scrollTop;
      }
    });
    return (_ctx, _cache) => {
      const _component_el_icon = resolveComponent("el-icon");
      return openBlock(), createElementBlock(
        "div",
        {
          ref_key: "TLayoutPageRef",
          ref: TLayoutPageRef,
          class: normalizeClass(["t_layout_page", { layout_page_no_margin: _ctx.isNoMargin }]),
          onScroll: _cache[0] || (_cache[0] = (e) => scrollTop.value = e.target.scrollTop)
        },
        [
          renderSlot(_ctx.$slots, "default"),
          _ctx.showGoTopButton ? (openBlock(), createElementBlock("div", _hoisted_1, [
            isShowGoTopButton.value ? (openBlock(), createElementBlock("div", {
              key: 0,
              onClick: backToTop
            }, [
              createVNode(
                _component_el_icon,
                normalizeProps(guardReactiveProps({ size: 24, ..._ctx.$attrs })),
                {
                  default: withCtx(() => [
                    createVNode(unref(CaretTop))
                  ]),
                  _: 1
                  /* STABLE */
                },
                16
                /* FULL_PROPS */
              )
            ])) : createCommentVNode("v-if", true)
          ])) : createCommentVNode("v-if", true)
        ],
        34
        /* CLASS, NEED_HYDRATION */
      );
    };
  }
});

export { _sfc_main as default };