@wocwin/t-ui-plus/lib/packages/components/layout-page/src/index.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var Icons = require('@element-plus/icons-vue');

const _hoisted_1 = {
  key: 0,
  class: "back_to_top"
};
var _sfc_main = /* @__PURE__ */ vue.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 = vue.ref(false);
    const TLayoutPageRef = vue.ref(null);
    const scrollTop = vue.ref(0);
    vue.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"
      });
    };
    vue.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";
      }
    });
    vue.onActivated(() => {
      if (!props.keepScrollDisabled) {
        ;
        TLayoutPageRef.value.scrollTop = scrollTop;
      }
    });
    return (_ctx, _cache) => {
      const _component_el_icon = vue.resolveComponent("el-icon");
      return vue.openBlock(), vue.createElementBlock(
        "div",
        {
          ref_key: "TLayoutPageRef",
          ref: TLayoutPageRef,
          class: vue.normalizeClass(["t_layout_page", { layout_page_no_margin: _ctx.isNoMargin }]),
          onScroll: _cache[0] || (_cache[0] = (e) => scrollTop.value = e.target.scrollTop)
        },
        [
          vue.renderSlot(_ctx.$slots, "default"),
          _ctx.showGoTopButton ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
            isShowGoTopButton.value ? (vue.openBlock(), vue.createElementBlock("div", {
              key: 0,
              onClick: backToTop
            }, [
              vue.createVNode(
                _component_el_icon,
                vue.normalizeProps(vue.guardReactiveProps({ size: 24, ..._ctx.$attrs })),
                {
                  default: vue.withCtx(() => [
                    vue.createVNode(vue.unref(Icons.CaretTop))
                  ]),
                  _: 1
                  /* STABLE */
                },
                16
                /* FULL_PROPS */
              )
            ])) : vue.createCommentVNode("v-if", true)
          ])) : vue.createCommentVNode("v-if", true)
        ],
        34
        /* CLASS, NEED_HYDRATION */
      );
    };
  }
});

exports.default = _sfc_main;