layui-vue/es/scroll/index2.js

import { w as withInstall } from "../badge/index2.js";
import { defineComponent, ref, reactive, onMounted, nextTick, onUnmounted, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, withModifiers } from "vue";
var index = /* @__PURE__ */ (() => ".layui-scroll{height:100%;overflow:hidden!important}.layui-scroll-y{position:relative;height:100%}.layui-scroll-y .layui-scroll-wrap{height:100%;overflow-y:scroll;scrollbar-width:none;-ms-overflow-style:none}.layui-scroll-y .layui-scroll-track{position:absolute;top:0;right:0;bottom:0;border-radius:8px;z-index:20}.layui-scroll-y .layui-scroll-track .layui-scroll-thumb{margin:0 auto;border-radius:6px;cursor:default}.layui-scroll-y ::-webkit-scrollbar{display:none}\n")();
const _hoisted_1 = { class: "layui-scroll-y" };
const _hoisted_2 = ["onMousedown"];
const __default__ = {
  name: "LayScroll"
};
const _sfc_main = defineComponent({
  ...__default__,
  props: {
    height: { default: "100%" },
    trackColor: { default: "rgba(0,0,0,0)" },
    thumbColor: { default: "#eeeeee" },
    thumbWidth: { default: 6 }
  },
  emits: ["arrive"],
  setup(__props, { emit }) {
    const scrollRef = ref();
    const barRef = ref();
    const data = reactive({
      translateY: 0,
      heightPre: 0,
      barHeight: 0,
      winWidth: document.body.clientWidth
    });
    let time;
    let isMove = false;
    let moveClientY = 0;
    let trackHeight = 0;
    let wrapHeight = 0;
    let wrapContentHeight = 0;
    onMounted(() => {
      monitorWindow();
      monitorScrollBar();
      nextTick(() => {
        calculationLength();
      });
    });
    onUnmounted(() => {
      window.clearInterval(time);
    });
    const monitorWindow = function() {
      let time2;
      window.addEventListener("resize", () => {
        data.winWidth = document.body.clientWidth;
        clearTimeout(time2);
        time2 = setTimeout(() => {
          initScrollListner();
        }, 500);
      });
    };
    const monitorScrollBar = function() {
      let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
      const observer = new MutationObserver((mutations) => {
        initScrollListner();
      });
      observer.observe(scrollRef.value, {
        attributes: true,
        childList: true,
        subtree: true
      });
    };
    const calculationLength = function() {
      time = setInterval(() => {
        initScrollListner();
      }, 50);
      setTimeout(() => {
        window.clearInterval(time);
      }, 2e3);
    };
    const initScrollListner = function() {
      let scroll = scrollRef.value;
      let bar = barRef.value;
      if (scroll && bar) {
        wrapContentHeight = scroll.scrollHeight;
        wrapHeight = scroll.clientHeight;
        trackHeight = bar.clientHeight;
        data.heightPre = wrapHeight / wrapContentHeight;
        data.barHeight = data.heightPre * trackHeight;
      }
    };
    const onMosewheel = (e) => {
      data.translateY = e.target.scrollTop * data.heightPre;
      if (data.translateY == 0) {
        arrive("top");
      } else if (e.target.scrollTop + e.target.offsetHeight == e.target.scrollHeight) {
        arrive("bottom");
      }
    };
    const arrive = (tb) => {
      emit("arrive", tb);
    };
    const moveStart = (e) => {
      isMove = true;
      moveClientY = e.clientY - data.translateY;
      moveTo();
      moveEnd();
    };
    const moveTo = () => {
      document.onmousemove = (e) => {
        if (isMove) {
          if (e.clientY - moveClientY > trackHeight - data.barHeight) {
            data.translateY = trackHeight - data.barHeight;
          } else if (e.clientY - moveClientY < 0) {
            data.translateY = 0;
          } else {
            data.translateY = e.clientY - moveClientY;
          }
          if (scrollRef.value) {
            scrollRef.value.scrollTop = data.translateY / data.heightPre;
          }
        }
      };
    };
    const moveEnd = function() {
      document.onmouseup = (e) => {
        if (isMove) {
          isMove = false;
        }
      };
    };
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["layui-scroll", { hide: data.winWidth < 500 }]),
        style: normalizeStyle({ height: __props.height })
      }, [
        createElementVNode("div", _hoisted_1, [
          createElementVNode("div", {
            ref_key: "scrollRef",
            ref: scrollRef,
            class: "layui-scroll-wrap",
            onScroll: onMosewheel
          }, [
            renderSlot(_ctx.$slots, "default")
          ], 544),
          createElementVNode("div", {
            ref_key: "barRef",
            ref: barRef,
            class: "layui-scroll-track",
            style: normalizeStyle({
              backgroundColor: data.heightPre == 1 ? "transparent" : __props.trackColor
            })
          }, [
            createElementVNode("div", {
              style: normalizeStyle({
                height: data.barHeight + "px",
                width: __props.thumbWidth + "px",
                transform: "translateY(" + data.translateY + "px)",
                backgroundColor: data.heightPre == 1 ? "transparent" : __props.thumbColor
              }),
              class: "layui-scroll-thumb",
              onMousedown: withModifiers(moveStart, ["stop", "prevent"])
            }, null, 44, _hoisted_2)
          ], 4)
        ])
      ], 6);
    };
  }
});
const component = withInstall(_sfc_main);
export { _sfc_main as _, component as c };