@ctsy/layui-vue/es/scroll/index.js

a component library for Vue 3 base on layui-vue

var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, reactive, onMounted, nextTick, onUnmounted, toRefs, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, renderSlot, withModifiers } from "vue";
import { _ as _export_sfc } from "../plugin-vue_export-helper.js";
var index_vue_vue_type_style_index_0_scoped_true_lang = "";
const _sfc_main = defineComponent({
  name: "LayScroll",
  props: {
    height: {
      type: String,
      default: "100%"
    },
    slotColor: {
      type: String,
      default: "rgba(0,0,0,0)"
    },
    scrollColor: {
      type: String,
      default: "#eeeeee"
    },
    scrollWidth: {
      type: Number,
      default: 6
    }
  },
  setup(props, ctx) {
    const data = reactive({
      scrollRef: null,
      barRef: null,
      translateY: 0,
      heightPre: 0,
      barHeight: 0,
      winWidth: document.body.clientWidth
    });
    let time = null;
    let isMove = false;
    let moveClientY = 0;
    let trackHeight = 0;
    let wrapHeight = 0;
    let wrapContentHeight = 0;
    onMounted(() => {
      monitorWindow();
      monitorScrollBar();
      nextTick(() => {
        calculationLength();
      });
    });
    onUnmounted(() => {
      window.clearInterval(time);
      time = null;
    });
    const monitorWindow = function() {
      let time2;
      window.addEventListener("resize", () => {
        data.winWidth = document.body.clientWidth;
        clearTimeout(time2);
        time2 = setTimeout(() => {
          initScrollListner();
        }, 500);
      });
    };
    const monitorScrollBar = function() {
      var monitorUl = data.scrollRef.children[0];
      let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver;
      let observer = new MutationObserver(function(mutations) {
        initScrollListner();
      });
      observer.observe(monitorUl, {
        attributes: true,
        childList: true
      });
    };
    const calculationLength = function() {
      time = setInterval(() => {
        initScrollListner();
      }, 50);
      setTimeout(() => {
        window.clearInterval(time);
        time = null;
      }, 2e3);
    };
    const initScrollListner = function() {
      let scroll = data.scrollRef;
      let bar = data.barRef;
      if (scroll) {
        wrapContentHeight = scroll.scrollHeight;
        wrapHeight = scroll.clientHeight;
        trackHeight = bar.clientHeight;
        data.heightPre = wrapHeight / wrapContentHeight;
        data.barHeight = data.heightPre * trackHeight;
      }
    };
    const onMosewheel = function(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 = function name(tb) {
      ctx.emit("arrive", tb);
    };
    const moveStart = function(e) {
      isMove = true;
      moveClientY = e.clientY - data.translateY;
      moveTo();
      moveEnd();
    };
    const moveTo = function() {
      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;
          }
          data.scrollRef.scrollTop = data.translateY / data.heightPre;
        }
      };
    };
    const moveEnd = function() {
      document.onmouseup = (e) => {
        if (isMove) {
          isMove = false;
        }
      };
    };
    return __spreadProps(__spreadValues({}, toRefs(data)), {
      onMosewheel,
      moveStart
    });
  }
});
const _hoisted_1 = { class: "scrollbar-y" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  return openBlock(), createElementBlock("div", {
    class: normalizeClass(["scrollbar-box", { hide: _ctx.winWidth < 500 }]),
    style: normalizeStyle({ height: _ctx.height })
  }, [
    createElementVNode("div", _hoisted_1, [
      createElementVNode("div", {
        ref: "scrollRef",
        class: "scroll-wrap",
        onScroll: _cache[0] || (_cache[0] = (...args) => _ctx.onMosewheel && _ctx.onMosewheel(...args))
      }, [
        renderSlot(_ctx.$slots, "default", {}, void 0, true)
      ], 544),
      createElementVNode("div", {
        ref: "barRef",
        class: "scrollbar-track",
        style: normalizeStyle({
          backgroundColor: _ctx.heightPre == 1 ? "rgba(0,0,0,0)" : _ctx.slotColor
        })
      }, [
        createElementVNode("div", {
          style: normalizeStyle({
            height: _ctx.barHeight + "px",
            width: _ctx.scrollWidth + "px",
            transform: "translateY(" + _ctx.translateY + "px)",
            backgroundColor: _ctx.heightPre == 1 ? "rgba(0,0,0,0)" : _ctx.scrollColor
          }),
          class: "scrollbar-thumb",
          onMousedown: _cache[1] || (_cache[1] = withModifiers((...args) => _ctx.moveStart && _ctx.moveStart(...args), ["stop", "prevent"]))
        }, null, 36)
      ], 4)
    ])
  ], 6);
}
var Component = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-5dabc9dc"]]);
Component.install = (app) => {
  app.component(Component.name, Component);
};
export { Component as default };